Html 带有嵌套列表的CSS多级菜单
Html 带有嵌套列表的CSS多级菜单,html,css,Html,Css,(来源:) 我想制作纯CSS多级菜单,如上图所示。我试过一些教程,但对我不起作用。菜单“xxxxx”和“yyyyy”出现在下面我的CSS代码的菜单“bbbbb”下面 我想做的是3级菜单,如上图所示 这是我的菜单HTML: <span id="nav"> <ul> <li><a href="#">ssss</a> <ul> <li>
(来源:) 我想制作纯CSS多级菜单,如上图所示。我试过一些教程,但对我不起作用。菜单“xxxxx”和“yyyyy”出现在下面我的CSS代码的菜单“bbbbb”下面 我想做的是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代码像上面的插图一样工作,任何帮助都将不胜感激。谢谢。我认为你的问题在于位置的相对性和绝对性。我去掉你的风格,自己做(更简单,更丑陋)。代码在这里 代码是: CSS: HTML:
-
-
- xxxxx
- YYYY
我对您的代码进行了一些编辑。。。检查这把小提琴
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: '» ';
}
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; }
<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>
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: '» '; */
}