使用HTML和CSS的嵌套菜单设计

a5g8bdjr 于 2022-12-20 发布在其他

关注(0)|答案(4)|浏览(130)

我创建了一个下拉菜单，当它有悬停效果时，菜单打开。然后我向这个菜单添加了元素，当我在它们上创建悬停效果时，其他菜单打开。但是当我想进一步扩展菜单时，我不能使用悬停效果。

正如你在图片中看到的，我可以用鼠标悬停的效果在下拉菜单中显示子菜单，但是在鼠标移动到子菜单之前，它会出现在它下面的元素上。

.navtop>ul {
  position: relative;
  z-index: 1
}

.navtop>ul>li {
  float: left;
  border-left: 1px solid #fff;
}

.navtop ul li a {
  display: block;
  padding: 10px 20px;
  color: #ccc
}

.navtop ul li:first-child {
  border: none;
}

.navtop>ul>li:hover>ul {
  display: block;
}

.navtop>ul>li>ul>li:hover ul {
  display: block;
}

.navtop>ul>li>ul>li>ul>li:hover>ul {
  display: block;
} // it didn't work.
.navtop>ul>li>ul li {
  position: relative;
}

.navtop>ul>li>ul {
  display: none;
  position: absolute;
  background: #333;
}

.navtop>ul>li>ul>li>ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 1px;
  background: #333
}

.navtop>ul>li>ul>li>ul>li>ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 1px;
  background: #333
} // it didn't work.

<div class="wrap">
  <nav class="navtop">
    <ul>
      <li><a href="#"><b class="caret"></b>Dropdwown Menus</a>
        <ul class="container">
          <li><a href="#">Dropdown Menu 1</a>
            <ul>
              <li><a href="#">Dropdown Submenu 1</a>
                <ul>
                  <li><a href="#">Dropdown Sub menu</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Submenu 2</a></li>
              <li><a href="#">Dropdown Submenu 3</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <div class="clear"></div>
  </nav>
</div>

css

来源：https://stackoverflow.com/questions/74850787/nested-menu-design-using-html-and-css

4条答案

按热度按时间

wlp8pajw1#

删除:hover中的所有代码段，改用.navtop li:hover>ul {display: block;}

赞(0）回复(0）举报 2022-12-20

ct2axkht2#

根据此更新您的样式

.navtop > ul{  
     position:relative; 
     z-index:1
}
.navtop > ul > li{ 
    float:left; 
    border-left:1px solid #fff;
}
.navtop ul li a{ 
    display:block; 
    padding:10px 20px; 
    color:#ccc
}
.navtop ul li:first-child{ 
    border:none;
}
.navtop > ul > li:hover > ul{ 
    display:block;
}
.navtop > ul > li > ul > li:hover ul{ 
    display:block;
}
 

.navtop > ul > li > ul > li > ul > li:hover > ul{ 
    display:block !important;
} // it didn't work.

.navtop > ul > li > ul li{ 
    position:relative;
}

.navtop > ul > li > ul{ 
    display:none; 
    position:absolute; 
    background:#333; 
}
.navtop > ul > li > ul > li > ul{ 
    display:none; 
    position:absolute; 
    left:100%; 
    top:1px; 
    background:#333
}

.navtop > ul > li > ul > li > ul > li > ul { 
    display:none !important; 
    position:absolute; 
    left:100%; 
    top:1px; 
    background:#333
}

赞(0）回复(0）举报 2022-12-20

wko9yo5t3#

这里我把li隐藏在li里面，然后当一个li悬停时，我直接在它里面显示li。

body, ul, li {
  padding: 0;
  margin: 0;
}
li li {
  display: none;
}
li:hover>ul>li {
  display: block;
}

li {
  background-color: orange;
}
li li {
  background-color: grey;
}
li li li {
  background-color: pink;
}

<ul>
  <li>Menu 1
    <ul>
      <li>Submenu 1
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
      <li>Submenu 2
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Menu 2
    <ul>
      <li>Submenu 1
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
      <li>Submenu 2
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

赞(0）回复(0）举报 2022-12-20

nbnkbykc4#

这应该有帮助!

* {
  margin: 0;
  padding: 0;
}

.parent {
  display: block;
  position: relative;
  float: left;
  line-height: 2rem;
  background-color: #d84f4f;
}

.parent a {
  margin: 1rem;
  color: #ffffff;
  text-decoration: none;
}

.parent:hover > ul {
  display: block;
  position: absolute;
}

.child {
  display: none;
}

.child li {
  background-color: #d84f4f;
  line-height: 2rem;
  width: 100%;
}

.child li a {
  color: #fff;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 10rem;
}

ul ul ul {
  left: 100%;
  top: 0;
}

li:hover {
  background-color: #8a1313;
}

.parent li:hover {
  background-color: #6c1111;
}

<nav class="nav">
    <ul id="menu">
        <li class="parent">
            <a href="#">Menu</a>
            <ul class="child">
                <li class="parent">
                    <a href="#">Dropdown Menu 1</a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 2</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 3</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    <ul id="about">
        <li class="parent">
            <a href="#">About</a>
            <ul class="child">
                <li class="parent">
                    <a href="#">Dropdown Menu 1</a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 2</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 3</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

赞(0）回复(0）举报 2022-12-20

我来回答

使用HTML和CSS的嵌套菜单设计

4条答案

相关问题

热门标签

最新问答