風格無序列表獨立於父無序列表

我不知道我是否正確地提出了問題，但讓我試着解釋我想實現的目標。風格無序列表獨立於父無序列表

我試圖基於WordPress的站點的風格導航菜單。

我想要的子菜單鏈接到一起的網站的<body>標籤（960像素寬）的整個寬度均勻地佈置。如果特定子菜單的鏈接不適合放在一行中，我希望它們環繞並排列整齊的列。

最後，我想子菜單，當它落下懸停，推動網站的其餘內容了。

問題：子菜單無序列表會影響父無序列表中鏈接的位置，從而移動鏈接。不知怎的，我可以做些什麼來守在原地父菜單鏈接的唯一的事情就是通過向拉子菜單的方式進行margin-right:-965px;

問：我應該如何修改我的CSS一路放置兩個子菜單左邊，與主容器邊緣平齊？

（如果需要的話，我可以指定自定義類每個子菜單分別，例如：.submenu-約和.submenu-投資者）

預先感謝您的幫助！

下面是導航菜單中的完整的CSS：

.main-navigation ul { 
list-style-type:none; 
margin-top:45px; 
} 

.main-navigation ul { 
display: inline-block; 
width:70%; 
float:right; 
} 

.main-navigation ul li { 
float:left; 
} 

.main-navigation ul li a { 
display:block; 
margin:3px 0 3px 40px; 
} 

.main-navigation ul ul { 
background:#efefef; 
display:none; 
} 

.main-navigation li { 
    font-size: 13px; 
} 

.main-navigation li a { 
outline: none; 
text-decoration:none; 
border-bottom: 0; 
color: #6a6a6a; 
text-transform: uppercase; 
//white-space: nowrap; 
} 

.main-navigation li a:hover { 
color: #000; 
} 

.main-navigation ul li:hover > ul { 
margin:-1px -960px 3px 0; 
display:block; 
width:960px; 
} 

.main-navigation li ul li a { 
font-size: 11px; 
margin: 10px 0 10px 10px; 
width:180px; 
} 

.main-navigation .menu-item > a, 
.main-navigation .menu-ancestor > a, 
.main-navigation .page_item > a, 
.main-navigation .page_ancestor > a { 
color: #9a9a9a; 
font-weight:bold; 
} 

.main-navigation .current-menu-item > a, 
.main-navigation .current-menu-ancestor > a, 
.main-navigation .current_page_item > a, 
.main-navigation .current_page_ancestor > a { 
color: #636363; 
font-weight:bold; 
}

來源

2013-04-16 Dimitri Vorontzov

找到我自己的答案。

從ul li:hover ul刪除背景。
設置position:relative併爲ul li:hover >ul li灰色背景。
單獨設置每個子菜單li項目的負左邊距，將它們分別左移不同數量的像素。

來源

2013-04-16 20:46:15

這應該這樣做

添加到您的CSS

.main-navigation ul li .sub-menu {position:absolute; left:0px;}

來源

2013-04-16 18:03:12 oscprofessionals

大聲笑，是的，這將是一個很好的解決方案，@Satish，不是嗎？問題是，我希望子菜單將頁面的其餘內容向下推（正如我在我的問題中提到的那樣）。當然，如果子菜單的位置是絕對的，則會發生這種情況。你認爲可能有其他解決方案，不依賴於絕對定位的解決方案嗎？我會很感激你的建議。 –

風格無序列表獨立於父無序列表

回答

相關問題