我有一个基于http://jsfiddle.net/2RgmH/
实施的CSS下拉菜单目前我遇到的问题是,在第3级菜单项中未与其对齐 他们的二级父母。第3级块从下面开始一层。
我的CSS:
* {
list-style:none;
margin:0;
padding:0;
font-size:1em;
cursor:pointer;
}
#menu{
margin:3px;
}
#menu > li{ /* Top Level */
float:left;
margin-right:3px;
}
#menu > li > span{
display:block;
background:#55aa7f;
padding:3px 10px;
}
#menu > li:hover > span{
color:#fff;
}
#menu > li > ul{ /* Second Level */
display:none;
background:#55aa7f;
}
#menu > li:hover > ul{
display:block;
position:absolute;
}
#menu > li > ul > li > span{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
color:#fff;
}
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#55aa7f;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
HTML
<li><span>Home</span></li>
<li><span>Test-L1</span>
<ul>
<li><span>Test-L2A</span></li>
<li><span>Test-L2B</span>
<ul>
<li><span>Test-L3A</span></li>
<li><span>Test-L3B</span></li>
</ul>
</li>
<li><span>Test-L2C</span>
<ul>
<li><span>Test-L3C</span></li>
<li><span>Test-L3D</span></li>
</ul>
</li>
</ul>
</li>
我发现了一个问题相同的问题here 我确实试图实现那里给出的唯一答案。但是无法使其发挥作用。 有人可以帮助我使用实际的CSS部分来与他们的父级进行第3级菜单对齐。 谢谢