demo

我做過嘗試，但與two > 2 > a not showing at right第三級菜單的問題沒有得到下拉菜單？問題多層次的CSS下拉菜單

#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標記。

來源

2013-09-01 Bhojendra Nepal

如果你不能編輯html，你可以按照我在'ul.sub_menu'中添加的規則並將它放在一個css規則中。請記住在'＃header-menu ul.menu ul li：hover> ul'規則中編輯'right'屬性 – damoiser

我發現了一個可能的解決問題的方法：

添加類上行子菜單：

<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-01 12:04:12 damoiser

替換您right: -250px;與left: 250px;它工作正常。 demo

來源

2013-09-01 12:15:59

問題多層次的CSS下拉菜單

demo

回答

相關問題