CSS 下拉菜单三级菜单问题

Question

我在下拉菜单中显示第 3 级时遇到问题。第 3 级未与其第 2 级父项正确对齐。如果您单击任何父级，则第三级从顶部开始。当然，这可能是因为绝对定位和 top: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 的更正版本。

Answer 1

给你。

解决方案 1:通过手动添加相对于 LI 元素的位置

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:通过在样式表中创建具有相对位置的 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;
}

希望这对您有所帮助。