Question

我的代码在导航栏上水平显示下拉菜单项。我希望它们在父项（“帐户”）上显示为下拉列表。我创建的嵌套列表似乎无效。任何帮助将不胜感激！

我正试图纯粹在HTML / CSS中做到这一点。

<header>
<nav class="menu">
  <ol>
    <li><img src="images/Machoire logo.png"></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">Notifications</a></li>   

    <li><a href="#">Account</a>
    <ul>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
    </li>

    <li><a href="#">Contact</a></li>
    </ol>
</nav>
</header>


header img {
    height: 40px;
    margin-left: 20px;
}

.menu {
    background-color: white;
    top: 450px;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
}


ol {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header a {
    color: grey;
    font-size: 18px;
    text-decoration: none;
}

header a:hover {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

Answer 1

下面是我认为您要完成的工作片段。您需要将下拉元素绝对定位在触发器下方，并在触发器上使用鼠标悬停属性以将其激活（在这种情况下，将display从none更改为block）。

header img {
    height: 40px;
    margin-left: 20px;
}
.menu {
    background-color: white;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}
ol {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}
.dropdown-trigger {
  position:relative;
}
.dropdown {
  position:absolute;
  top:15px;
  right:-15px;
  display:none;
}
.dropdown > li {
  display:block;
}
header li {
    margin: 15px;
    display:inline-block;
}
.dropdown-trigger:hover > ul {
  display:block;
}
header a {
    color: grey;
    font-size: 15px;
    text-decoration: none;
}
header a:hover {
    color: black;
}

<header>
<nav class="menu">
  <ol>
    <li><img src="images/Machoire logo.png"></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">Notifications</a></li>   

    <li class="dropdown-trigger"><a href="#">Account</a>
      <ul class="dropdown">
          <li><a href="#">Profile</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Logout</a></li>
      </ul>
    </li>

    <li><a href="#">Contact</a></li>
    </ol>
</nav>
</header>

着陆页下拉项水平显示

1 个答案: