demo

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/

Answer 2

将right: -250px;替换为left: 250px;它可以正常工作。 demo

多级css下拉菜单的问题

demo

2 个答案: