带有嵌套列表的 CSS 多级菜单答案

【问题标题】：CSS multi level menu with nested list带有嵌套列表的 CSS 多级菜单
【发布时间】：2019-09-16 23:12:26
【问题描述】：

我想制作如上图所示的纯 CSS 多级菜单。我已经尝试了一些教程，但它对我不起作用。菜单“xxxxx”和“yyyyy”出现在菜单“bbbbb”下方，用于我的 CSS 代码。

我想做的是像上图这样的3级菜单。

这是我的菜单 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; 
        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: '» '; 
}

非常感谢任何帮助以使我的 CSS 代码像上面的插图一样工作。谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

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

代码是：

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>

【讨论】：

【解决方案2】：

我已经稍微编辑了你的代码......检查这个小提琴http://jsfiddle.net/kau5h/

li {
        list-style:none !important;
    position:relative;
}

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

#nav li {
        line-height:20px;
        float:left;
}
#nav li a {display:block;}
#nav li ul{ 
        display:none; 
    z-index:99999;
        /*display:list-item !important;*/
        position:absolute;
        /*margin-top:2px;*/
        margin-left:0px;

        background: #8ac312;
}
#nav li ul ul {left: 100%; top:0;}
#nav ul li ul {
    /*margin-top:-3em;
    margin-left:7em;*/
}   

#nav ul li:hover > ul {
        display: block;
}

#nav ul li:hover ul li {
        float:none;
        /*padding: 2px 0px;*/
}
#nav ul ul li {
padding: 5px 15px;
    display: block;
}
#nav ul ul li > a:before { 
        /*content: '» '; */
}

【讨论】：