1

演示

我试过了，但是第三级菜单问题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 标记。

4

2 回答 2

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/

于 2013-09-01T12:04:12.707 回答
0

right: -250px;用它替换你的left: 250px;工作正常。演示

于 2013-09-01T12:15:59.713 回答