html-不显示下拉悬停

想回家种地的码农 lv.1

发布时间：2022-05-31 19:55:24 204

相关标签： # css

我试图在标题中做一个带有悬停效果的下拉菜单，我的下拉菜单将出现

display: flex;

在下面的 css 中，我评论了我想要制作下拉悬停效果的工作地点。不要关注 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>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。