下拉悬停不出现

Question

我想在 header 中制作一个具有悬停效果的下拉菜单，我的下拉菜单将显示

display: flex;

在下面的 css 中，我评论了 not working place where I want to make a dropdown hover effect。 不用关注asp-controller和asp-action，其实对html的观看没有任何影响。

@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 class="siteHeader">
  <!-- This section gets pushed to the left side-->
  <div class="siteHeader__section">
    <div class="siteHeader__item siteHeaderLogo">
      <a asp-controller="Home" asp-action="Index">Expense
          <i class="fa fa-usd" aria-hidden="true"></i>
      </a>
      
    </div>
            <ul>
                <li class="nav-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
                <li class="nav-item"><a asp-controller="Home" asp-action="Contact">Contact</a></li>
            </ul>
  </div>
  <!-- This section gets pushed to the right side-->
<div class="siteHeader__section">

                      <ul>
                        <li><button class="userNameButton">username
                            <i class="fa fa-caret-down" aria-hidden="true"></i>
                        </button>
                            <div class="dropdown">
                                <div class="dropdown-content">
                                    <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" class="logout-input"/>
                                         </form>
                                </ul>
                                </div>
                                
                            </div>    
                        </li>
                     </ul>  

          
  </div>
</div>
    </header>
    
    <div class="container">
        <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>

想法：光标在用户名上 -> boom 下拉菜单应该出现

Answer 1

你的问题是因为使用 display: none; 如果你使用 visivility css 那么它会正常工作检查我的代码..希望它会帮助你，谢谢你:)

<!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 class="siteHeader">
      <!-- This section gets pushed to the left side-->
      <div class="siteHeader__section">
        <div class="siteHeader__item siteHeaderLogo">
          <a asp-controller="Home" asp-action="Index">Expense
              <i class="fa fa-usd" aria-hidden="true"></i>
          </a>
          
        </div>
                <ul>
                    <li class="nav-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
                    <li class="nav-item"><a asp-controller="Home" asp-action="Contact">Contact</a></li>
                </ul>
      </div>
      <!-- This section gets pushed to the right side-->
    <div class="siteHeader__section">
    
                          <ul>
                            <li><button class="userNameButton">username
                                <i class="fa fa-caret-down" aria-hidden="true"></i>
                            </li></button>
                                <div class="dropdown">
                                    <div class="dropdown-content">
                                        <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" class="logout-input"/>
                                             </form>
                                    </ul>
                                    </div>
                                    
                                </div>    
                            </li>
                         </ul>  
              
      </div>
    </div>
        </header>
        
        <div class="container">
            <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>

Answer 2

您的下拉元素和用户名按钮应该有相同的父元素，它们应该是可悬停的，正如您在此处看到的那样：

当父项悬停时将子项（下拉）设置为可见

.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 class="username-wrapper">
  <span>Username</span>
  <div class="dropdown">
    <ul>
      <li>item1</li>
      <li>item2</li>
    </ul>
  </div>
</div>

Answer 3

您可以使用这种方法：

@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 class="siteHeader">
        <!-- This section gets pushed to the left side-->
        <div class="siteHeader__section">
          <div class="siteHeader__item siteHeaderLogo">
            <a asp-controller="Home" asp-action="Index"
              >Expense
              <i class="fa fa-usd" aria-hidden="true"></i>
            </a>
          </div>
          <ul>
            <li class="nav-item">
              <a asp-controller="Home" asp-action="Index">Home</a>
            </li>
            <li class="nav-item">
              <a asp-controller="Home" asp-action="Contact">Contact</a>
            </li>
          </ul>
        </div>
        <!-- This section gets pushed to the right side-->
        <div class="siteHeader__section">
          <ul>
            <li>
              <button class="userNameButton">
                username
                <i class="fa fa-caret-down" aria-hidden="true"></i>
              </button>
              <div class="dropdown">
                <div class="dropdown-content">
                  <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"
                        class="logout-input"
                      />
                    </form>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <div class="container">
      <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>

下拉悬停不出现

Dropdown hover does not appear

html

css