css - 多级CSS下拉菜单的问题

Question

demo

我已经尝试过，但是 two > 2 > a not showing at right 的第三级菜单问题没有得到下拉菜单？

#header-menu ul.menu li {
display: block;
position: relative;
float: left;
}
#header-menu ul.menu li a{
    padding: 10px !important;
}
#header-menu li ul {
display: none;
}
#header-menu ul.menu li a {
/*white-space: nowrap;*/
}
#header-menu ul.menu li > ul a{
    margin: 0;
    padding: 10px !important;
    display: block;
}
#header-menu ul.menu li a:hover {
/*background: #617F8A;*/
color: #0B6AAD;
}

#header-menu li:hover > ul {
display: block;
position: absolute;
top: 22px;
left: 0;
width: 250px;
/*display: table;*/
margin: 0;
padding: 0;
/*border: 6px solid #666666;
border-radius: 12px;
box-sizing: border-box;*/

}
#header-menu li:hover li {
float: none;
font-size: 11px;
}
#header-menu li:hover a {
background: #617F8A;
}
#header-menu li:hover li a:hover {
/*background: #95A9B1;*/
}
#header-menu ul.menu ul li a{
    border-bottom: 1px dashed #666666;
}
#header-menu ul.menu ul li:last-child a{
    border-bottom: none;
}
#header-menu ul.menu ul li:hover > ul{
    position: absolute;
    right: -250px;
    top: 0;
    width: 250px;
    display: inline;
}

请注意:我无法编辑 html 标记。

Answer 1

我已经找到了解决您问题的可能方案:

在 ul 子菜单中添加一个类:

    <ul class="sub_menu">
        <li><a href="#">a not showing at right</a></li>
        <li><a href="#">b</a></li>
        </ul>
    </li>

添加这个CSS:

ul.sub_menu {
 left: 250px;
 top: 0px;
 display: block;
 position: absolute;
 width: 200px;
 z-index: 1000;
}

并修改您的 css 规则:

#header-menu li:hover > ul {
display: block;
position: absolute;
left: 250;
width: 250px;
/*display: table;*/
margin: 0;
padding: 0;
/*border: 6px solid #666666;
border-radius: 12px;
box-sizing: border-box;*/

}

删除这条规则:

#header-menu ul.menu ul li:hover > ul{
    position: absolute;
    right: -250px;
    top: 0;
    width: 250px;
    display: inline;
}

也许 jsFiddle 更全面 ;) : http://jsfiddle.net/damoiser/6ax6s/2/