在側邊欄上，如何使第二級菜單在第一級菜單旁邊打開？

我的網站有一個固定的頂部導航欄和一個固定的LHS導航欄。在LHS導航欄上有一個月份列表，以及一個次要彈出式菜單，列出每個月的內容。您現在可以看到該網站：Site 在側邊欄上，如何使第二級菜單在第一級菜單旁邊打開？

輔助彈出式菜單的列表固定在頂部。如果您沒有將鼠標懸停在二級菜單項上，則會關閉。因此，隨着月份的推移，通過二級菜單導航到某些內容將變得不可能。解決方案是更改二級菜單，使其與相應的月份相關，而不是固定在頂部。這是我的知識不足的地方，我很難在CSS中編寫解決方案（不使用JS）。

以下是內容：

<div id="leftbar"> 
    <ul id="leftbarlinks"> 
     <li>November 2015 
      <ul id="secondarylinks"> 
       <li><a href="/dvi/insight/november2015content.html">Content List</a></li> 
      </ul> 
     </li> 
     <li>October 2015 
      <ul id="secondarylinks"> 
       <li><a href="/dvi/insight/october2015content.html">Content List</a></li> 
       <li><a href="/dvi/insight/Q3-2015-Shell.html">Shell Q3 2015</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

這裏是CSS：

/* Formatting the LHS vertical navigation bar (main navigation bar) on all pages */ 
#leftbar { position: fixed; top: 0; left: 0; height: 100%; width: 170px; text-align: left; color: rgba(53,56,57,0.97); background-color: rgba(53,56,57,0.97); margin-top: 40px; } 
#leftbarlinks { white-space: nowrap; } 
#leftbarlinks li { font-family: 'HelveticaNeue-Light', sans-serif; font-size: 20px; color: #E6E6E6; text-decoration: none; margin-left: -35px; line-height: 2; padding: 0; } 
#leftbarlinks li:hover { color: #E4433F; text-decoration: none; cursor: pointer; } 
#secondarylinks a { font-family: 'HelveticaNeue-Light', sans-serif; font-size: 18px; color: #E6E6E6; text-decoration: none; line-height: 1.5; list-style-type:none; } 
#secondarylinks a:hover { color: #E4433F; text-decoration: none; cursor: pointer; } 
#leftbar ul li ul { position: absolute; display: none; float: left; margin-top: auto; } 
#leftbar ul li:hover ul {left: 170px; top: 0; display: block; text-decoration: none; list-style-type: none; } 
#leftbar ul li ul li { background-color: rgba(20,22,22,1); line-height: 1.5; }

道歉，如果編碼順序稍有糊塗，這是第一個網站，我已經創建了 - 我大多了在我走的時候撿東西。

在此先感謝所有答覆！

來源

2015-11-01 Yasin Hashim

這個屬性添加到你的CSS這個規則裏面：

#leftbarlinks li 
{ 
    position: relative; 
}

而且還可以防止從子菜單消失，而移動光標向他們補充一點：

#leftbar ul li ul 
{ 
    margin-left: -5px; 
}

來源

2015-11-01 20:29:38 razzak

完美，謝謝！ –

歡迎您，如果有幫助，請接受我的回答:) – razzak

在側邊欄上，如何使第二級菜單在第一級菜單旁邊打開？

回答

相關問題