dropdown hover does not appears-CodePudding

I trying to do a dropdown menu in header with a hover effect, where my dropdown will be appear with

display: flex;

In css below I commented not working place where I want to make a dropdown hover effect. Don't pay attention on asp-controller or asp-action, it's actually has no any influnce to html view.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    outline: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
}


.siteHeader {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #56727C;
}

.siteHeader__section{
    display: flex;
    align-items: center;
}

.siteHeader__item {
    padding: 5px 15px;
    font-size: 12px;
}

    .siteHeader__item   .siteHeader__item {
        margin-left: 5px;
    }

    .siteHeader__item.is-site-header-item-selected {
        color: #FFFFFF;
        background-color: #415F69;
        border-radius: 4px;
    }

.siteHeaderLogo {
    font-size: 20px;
    line-height: 0;
    color: white;
}

.siteHeader__section li {
    list-style: none;
}

.siteHeader__section a {
    text-decoration: none;
    color: #fff;
}

.siteHeader__section ul li.nav-item {
    display: inline-block;
    margin: 10px;
}

.userNameButton {
    color: #fff;
    font-size: inherit;
    border: none;
    background: none;
    cursor: pointer;
}

.dropdown-content li {
    display: flex;
    flex-direction: column;
}

/*Here I hide dropdown*/
.dropdown {
    display: none;
    text-align: center;
    background-color: #fff;
    border: 1px solid #000;
    position: absolute;
    right: 1%;
}
/*Here I want to do a dropdown hover effect*/
.dropdown:hover .dropdown-content {
    display: flex;
}


.dropdown ul li a {
    color: #000;

}

.logout-input {
    border: none;
    background-color: #fff;
    font-size: inherit;
    cursor: pointer;
    width: 100%;

}

.dropdown ul li a, .logout-input {
    color: #000;
    padding: 15px;
}


.dropdown ul li a:hover, .logout-input:hover {
    background-color: #000;
    color: #fff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Expense</title>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" asp-append-version="true"/>
</head>
<body>
    <header>
        <div >
  <!-- This section gets pushed to the left side-->
  <div >
    <div >
      <a asp-controller="Home" asp-action="Index">Expense
          <i  aria-hidden="true"></i>
      </a>
      
    </div>
            <ul>
                <li ><a asp-controller="Home" asp-action="Index">Home</a></li>
                <li ><a asp-controller="Home" asp-action="Contact">Contact</a></li>
            </ul>
  </div>
  <!-- This section gets pushed to the right side-->
<div >

                      <ul>
                        <li><button >username
                            <i  aria-hidden="true"></i>
                        </button>
                            <div >
                                <div >
                                    <ul>
                                        <li><a href="#">Profile</a> </li>
                                        <li><a href="#">Expenses</a></li> 
                                        <form asp-controller="Account" asp-action="Logout" method="post">
                                                <input type="submit" value="Logout" />
                                         </form>
                                </ul>
                                </div>
                                
                            </div>    
                        </li>
                     </ul>  

          
  </div>
</div>
    </header>
    
    <div >
        <main role="main">
          
        </main>
    </div>
  
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>

Idea: cursor on username -> boom dropdown should apear

CodePudding user response：

You can use this approach:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
  outline: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
}

.siteHeader {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #56727c;
}

.siteHeader__section {
  display: flex;
  align-items: center;
}

.siteHeader__item {
  padding: 5px 15px;
  font-size: 12px;
}

.siteHeader__item   .siteHeader__item {
  margin-left: 5px;
}

.siteHeader__item.is-site-header-item-selected {
  color: #ffffff;
  background-color: #415f69;
  border-radius: 4px;
}

.siteHeaderLogo {
  font-size: 20px;
  line-height: 0;
  color: white;
}

.siteHeader__section li {
  list-style: none;
}

.siteHeader__section a {
  text-decoration: none;
  color: #fff;
}

.siteHeader__section ul li.nav-item {
  display: inline-block;
  margin: 10px;
}

.userNameButton {
  color: #fff;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.dropdown-content li {
  display: flex;
  flex-direction: column;
}

/*Here I hide dropdown*/
.dropdown {
  visibility: hidden;
  opacity: 0;
  text-align: center;
  background-color: #fff;
  border: 1px solid #000;
  position: absolute;
  right: 1%;
  transition: 0.3s;
}
/*Here Ishow  hover effect*/
.siteHeader__section:hover .dropdown {
  visibility: visible;
  opacity: 1;
}

.dropdown ul li a {
  color: #000;
}

.logout-input {
  border: none;
  background-color: #fff;
  font-size: inherit;
  cursor: pointer;
  width: 100%;
}

.dropdown ul li a,
.logout-input {
  color: #000;
  padding: 15px;
}

.dropdown ul li a:hover,
.logout-input:hover {
  background-color: #000;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Expense</title>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
      asp-append-version="true"
    />
  </head>
  <body>
    <header>
      <div >
        <!-- This section gets pushed to the left side-->
        <div >
          <div >
            <a asp-controller="Home" asp-action="Index"
              >Expense
              <i  aria-hidden="true"></i>
            </a>
          </div>
          <ul>
            <li >
              <a asp-controller="Home" asp-action="Index">Home</a>
            </li>
            <li >
              <a asp-controller="Home" asp-action="Contact">Contact</a>
            </li>
          </ul>
        </div>
        <!-- This section gets pushed to the right side-->
        <div >
          <ul>
            <li>
              <button >
                username
                <i  aria-hidden="true"></i>
              </button>
              <div >
                <div >
                  <ul>
                    <li><a href="#">Profile</a></li>
                    <li><a href="#">Expenses</a></li>
                    <form
                      asp-controller="Account"
                      asp-action="Logout"
                      method="post"
                    >
                      <input
                        type="submit"
                        value="Logout"
                        
                      />
                    </form>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <div >
      <main role="main"></main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
  </body>
</html>

CodePudding user response：

Hmm wait is the hover problem on the Username? if it is try this: if that does not work what about you try to make a block using CSS: in CSS write the width, color, make it not visible, etc. then you say when mouseover (or onclick) with js.

Then, when mouseover or onclick the CSS block should be visible!

(I could misunderstand, but the username dropdown thing do not appear, so in case,)

CodePudding user response：

Your dropdown element and username button should have the same parent which should be hoverable as you can see here:

When parent is hovered set child(dropdown) to be visible

.username-wrapper {
  position: relative;
}

.username-wrapper span {
  background: deepskyblue;
  cursor: pointer;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.username-wrapper:hover .dropdown {
  display: block;
}

<div >
  <span>Username</span>
  <div >
    <ul>
      <li>item1</li>
      <li>item2</li>
    </ul>
  </div>
</div>

CodePudding user response：

You problem cause is use display: none; if you use visivility css then it will work properly checkout my code.. hope it will help you , Thank You :)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Expense</title>
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" asp-append-version="true"/>
        <style>
         @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    
    * {
        outline: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        font-size: 18px;
        font-family: 'Roboto', sans-serif;
    }
    
    
    .siteHeader {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #56727C;
    }
    
    .siteHeader__section{
        display: flex;
        align-items: center;
    }
    
    .siteHeader__item {
        padding: 5px 15px;
        font-size: 12px;
    }
    
        .siteHeader__item   .siteHeader__item {
            margin-left: 5px;
        }
    
        .siteHeader__item.is-site-header-item-selected {
            color: #FFFFFF;
            background-color: #415F69;
            border-radius: 4px;
        }
    
    .siteHeaderLogo {
        font-size: 20px;
        line-height: 0;
        color: white;
    }
    
    .siteHeader__section li {
        list-style: none;
    }
    
    .siteHeader__section a {
        text-decoration: none;
        color: #fff;
    }
    
    .siteHeader__section ul li.nav-item {
        display: inline-block;
        margin: 10px;
    }
    
    .userNameButton {
        color: #fff;
        font-size: inherit;
        border: none;
        background: none;
        cursor: pointer;
    }
    
    .dropdown-content li {
        display: flex;
        flex-direction: column;
    }
    
    /*Here I hide dropdown*/
    .dropdown {
      visivility: hiden;
      opacity: 0;
      text-align: center;
      background-color: #fff;
      border: 1px solid #000;
      position: absolute;
      right: 1%;
      tranisition: .3s;
    
    }
    /*Here Ishow  hover effect*/
    .siteHeader__section:hover .dropdown{
      visivility: vissible;
      opacity: 1;
    }
    
    
    .dropdown ul li a {
        color: #000;
    
    }
    
    .logout-input {
        border: none;
        background-color: #fff;
        font-size: inherit;
        cursor: pointer;
        width: 100%;
    
    }
    
    .dropdown ul li a, .logout-input {
        color: #000;
        padding: 15px;
    }
    
    
    .dropdown ul li a:hover, .logout-input:hover {
        background-color: #000;
        color: #fff;
    }
        </style>
    </head>
    <body>
        <header>
            <div >
      <!-- This section gets pushed to the left side-->
      <div >
        <div >
          <a asp-controller="Home" asp-action="Index">Expense
              <i  aria-hidden="true"></i>
          </a>
          
        </div>
                <ul>
                    <li ><a asp-controller="Home" asp-action="Index">Home</a></li>
                    <li ><a asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
      </div>
      <!-- This section gets pushed to the right side-->
    <div >
    
                          <ul>
                            <li><button >username
                                <i  aria-hidden="true"></i>
                            </li></button>
                                <div >
                                    <div >
                                        <ul>
                                            <li><a href="#">Profile</a> </li>
                                            <li><a href="#">Expenses</a></li> 
                                            <form asp-controller="Account" asp-action="Logout" method="post">
                                                    <input type="submit" value="Logout" />
                                             </form>
                                    </ul>
                                    </div>
                                    
                                </div>    
                            </li>
                         </ul>  
              
      </div>
    </div>
        </header>
        
        <div >
            <main role="main">
              
            </main>
        </div>
      
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </body>
    </html>