Question

我想使用HTML和CSS创建一个多级下拉样式菜单。这是HTML：

<div id="body">
    <div class="sidenav">
        <ul class="sidenavmenu">
            <li class="nav-header">
                    <div class="logo"><img src="Content/Images/logosmallest.gif" /></div>
                <div class="dropdown">
                    <span>
                        <img alt="image" class="img-circle" src="Images/profpicpark.jpg"/>
                    </span>
                </div>
                <span class="name">Parker Green</span>
                <span class="text-muted">Web Designer</span>
            </li>
            <li><a href="#">
                    <i class="fa fa-envelope">
                    </i>Mailbox
                </a>
                        <ul>
                            <li>test</li>
                            <li>test</li>
                            <li>test</li>
                        </ul>
            </li>

CSS：

.sidenav ul li ul {
      display: none;
      position: absolute;
      width: 150px;
      top: 48px;
      left: 100px;
  }
  .sidenav ul li ul li {
      display: block;
  }
  .sidenav ul li:hover ul {
      display: block;
   }

到目前为止，该代码非常基础，几乎不起作用。我希望子菜单li在点击或悬停时显示。此菜单是侧面导航，因此我还需要菜单的其余部分进行相应的响应（向下移动以便下拉项目不会遇到其他项目。）

Answer 1

您可以使用>运算符通过css与另一个元素进行交互来显示元素。即：

sidenavmenu {
display: none;
}
sidenav:hover > sidenavmenu {
display: block;
}

利用它来获得你想要的效果

在HTML / CSS中制作多级菜单

1 个答案: