我在下拉菜单中显示第3级时遇到问题。第3级未与其第2级父级正确对齐。如果您点击任何父级,则第三级从顶部开始。 当然,这可能是因为绝对的假设并且有顶部:0。我试图将定位更改为相对,但焦点中的父菜单项会扩展。更改Top属性的值也没有帮助。我无法找到一个替代的CSS,就像我找到的那个一样简单。
HTML
<div id="menu">
<ul id="menu">
<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>
</ul>
</div>
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;
}
的jsfiddle http://jsfiddle.net/85sZy/
我在IE9和Chrome v29中尝试过。如果用上述css无法达到结果,请为我提供另一个用于此目的的css。我更喜欢上述css的更正版本。
答案 0 :(得分:3)
你走了。
解决方案1:手动添加相对于LI ELEMENT的位置
<强> WORKING DEMO 强>
HTML:
<div id="menu">
<ul id="menu">
<li><span>Home</span></li>
<li><span>Test-L1</span>
<ul>
<li><span>Test-L2A</span></li>
<li class="levelThreeAlign"><span>Test-L2B</span>
<ul>
<li><span>Test-L3A</span></li>
<li><span>Test-L3B</span></li>
</ul>
</li>
<li class="levelThreeAlign"><span>Test-L2C</span>
<ul>
<li><span>Test-L3C</span></li>
<li><span>Test-L3D</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
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;
}
.levelThreeAlign{position:relative;}
解决方案2:在具有相对位置的STYLESHEET中创建CSS继承类型
<强> WORKING DEMO 强>
HTML:
<div id="menu">
<ul id="menu">
<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>
</ul>
</div>
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 > li{position:relative;}
#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;
}
希望这有帮助。
答案 1 :(得分:0)
HTML
<div id="menu-container">
<ul id="menu">
<li><span>Home</span></li>
<li><span>Test-L1A</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>
<li><span>Test-L2A</span></li>
</ul>
</div>
CSS
#menu-container * {
float: left;
display: inline-block;
padding: 0; margin: 0;
list-style:none;
position: relative;
}
#menu-container span {
cursor:pointer;
background: #ccc;
padding: 6px;
margin: 6px;
overflow: hidden;
white-space: nowrap;
}
#menu ul {
position: absolute;
}
/*first level*/
#menu > li > ul {
left: 0;
top: 100%;
}
/*other levels*/
#menu > li > ul > li ul {
left: 100;
top: 0%;
}
/*hide and show on hover*/
#menu li > ul li {
display: none;
}
#menu li:hover > ul > li {
display: block;
}