带有嵌套列表的CSS多级菜单 [英] CSS multi level menu with nested list

问题描述

我想制作纯CSS多级菜单，如上图所示。我尝试了一些教程，但它不适合我。菜单xxxxx和yyyyy出现在下面的CSS代码菜单bbbbb下面。

我想要的是3级菜单，如上图所示。 / p>

这是我的菜单HTML：

 < span id = NAV > 
< ul> 
< li>< a href =＃> ssss< / a> 
< ul> 
< li>< a href =＃> aaaaa< / a>< / li> 
< li>< a href =＃> bbbbb< / a> 
< ul> 
< li> xxxxx< / li> 
< li> yyyyy< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< li>< a href =＃> ttttt< / a>< / li> 
< li>< a href =＃> uuuuu< / a>< / li> 
< / ul> 
< / span> 
  

这是我最小化的CSS代码：

  li {
 list-style：none！important; 
} 
 
 #nav，＃nav ul {
 list-style：none; 
填充：0; 
保证金：0; 
} 
 
 #nav li {
 line-height：20px; 
 float：left; 
} 
 
 #nav li ul {
 display：none; 
} 
 
 #nav ul li ul {
 margin-top：-3em; 
 margin-left：7em; 
} 
 
 #nav ul li：hover ul {
 z-index：99999; 
 display：list-item！important; 
仓位：绝对; 
 margin-top：2px; 
 margin-left：0px; 
填充：5px 15px; 
背景：＃8ac312; 
} 
 
 #nav ul li：hover ul li {
 float：none; 
填充：2px 0px; 
} 
 
 
 #nav ul li：hover ul li> a：在{
内容：'»'之前; 
} 
  

任何帮助都会非常感激，让我的CSS代码像插图图片一样工作以上。谢谢。

解决方案

我认为你的问题是位置相对和绝对的。我删除你的风格，自己做（更简单，更丑陋）。代码在这里 jsFiddle

代码是：

CSS：

  ul {padding：0;余量：0; } 
 li {list-style：none; } 
 li> ul {display：none; } 
 li：hover> ul {display：block; } 
 .lvl1 li {margin-right：10px;显示：内联;位置：相对; } 
 .lvl2 {position：absolute; } 
 .lvl2 li {position：relative; } 
 .lvl3 {position：absolute;顶：0像素;左：50px; } 
  

HTML：

 < span id =nav> 
< ul class ='lvl1'> 
< li>< a href =＃> ssss< / a> 
< ul class ='lvl2'> 
< li>< a href =＃> aaaaa< / a>< / li> 
< li>< a href =＃> bbbbb< / a> 
< ul class ='lvl3'> 
< li> xxxxx< / li> 
< li> yyyyy< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< li>< a href =＃> ttttt< / a>< / li> 
< li>< a href =＃> uuuuu< / a>< / li> 
< / ul> 
< / span> 
  

I want to make pure CSS multi level menu like the picture above. I have tried some tutorial but its not working for me. Menu "xxxxx" and "yyyyy" appear below menu "bbbbb" for my CSS code below.

What I want to make is 3 level menu like the picture above.

This is my HTML for the menu:

<span id="nav">
   <ul>
        <li><a href="#">ssss</a>
              <ul>
                  <li><a href="#">aaaaa</a></li>
                  <li><a href="#">bbbbb</a>
                       <ul>
                           <li>xxxxx</li>
                           <li>yyyyy</li>
                       </ul>
                  </li>
             </ul>
        </li>
        <li><a href="#">ttttt</a></li>
        <li><a href="#">uuuuu</a></li>           
     </ul>                                                           
</span>

And this is my minimized CSS code:

li {
        list-style:none !important;
}

#nav, #nav ul {
        list-style: none; 
        padding:0;
        margin:0;
}

#nav li {
        line-height:20px;
        float:left;
}

#nav li ul{ 
        display:none; 
}

#nav ul li ul {
    margin-top:-3em;
    margin-left:7em;
}   

#nav ul li:hover ul {
        z-index:99999;
        display:list-item !important;
        position:absolute;
        margin-top:2px;
        margin-left:0px;
        padding: 5px 15px;
        background: #8ac312;
}

#nav ul li:hover ul li {
        float:none;
        padding: 2px 0px;
}


#nav ul li:hover ul li > a:before { 
        content: '» '; 
}

Any help would be very appreciated to make my CSS code working like the illustration picture above. Thanks.

解决方案

I think your problem is position relative and absolute. I remove your style and do on my own (simpler, uglier). Code is here jsFiddle

And the code is:

CSS:

ul { padding:0; margin:0;  }
li { list-style:none; }
li > ul { display: none; }
li:hover > ul { display: block; }
.lvl1 li { margin-right: 10px; display: inline; position:relative; }
.lvl2 { position: absolute; }
.lvl2 li { position: relative; }
.lvl3 { position: absolute; top:0px; left: 50px; }

HTML:

<span id="nav">
   <ul class='lvl1'>
        <li><a href="#">ssss</a>
              <ul class='lvl2'>
                  <li><a href="#">aaaaa</a></li>
                  <li><a href="#">bbbbb</a>
                       <ul class='lvl3'>
                           <li>xxxxx</li>
                           <li>yyyyy</li>
                       </ul>
                  </li>
             </ul>
        </li>
        <li><a href="#">ttttt</a></li>
        <li><a href="#">uuuuu</a></li>           
     </ul>                                                           
</span>

这篇关于带有嵌套列表的CSS多级菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！