如何將垂直位置放置在垂直CSS菜單的左側或右側？

我寫了一個基本的CSS菜單 - 一個垂直導航欄，旨在放置在一邊。但是，除了當前的設計外，我希望能夠將項目2.0中的下拉列表放置到父項的左側或右側。如何將垂直位置放置在垂直CSS菜單的左側或右側？

完成此操作的最佳方法是什麼？

我還包括當前代碼的鏈接的jsfiddle：https://jsfiddle.net/eagqxnaz/1/

<ul class="navbar"> 
    <li><a href="#">1.0</a></li> 
    <li><a href="#">2.0</a> 
    <ul> 
     <li><a href="/?">2.1</a></li> 
     <li><a href="/?">2.2</a></li> 
     <li><a href="/?">2.3</a></li> 
     <li><a href="/?">2.4</a></li> 
    </ul>   
    </li> 
</ul> 

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
} 

.navbar a {       
    color: #FFF; 
    display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

.navbar li ul { 
    display: none; 
}    

.navbar li:hover ul  { 
    position: absolute; 
    display: block; 
    left: 0; 
}

來源

2017-03-08 Merlin

[小提琴]（https://jsfiddle.net/eagqxnaz/2/） –

謝謝你 - 我不能完全得到那工作正常。請給他人解釋一個答案？ – Merlin

不客氣，你的問題解決了就夠了。不過，我想提一點，作爲一種更好的做法，您不應該在'hover'上應用樣式。將它們添加到正常樣式中，懸停時它應該只是'display：none/block'，除非在懸停時需要某些樣式更改。 –

嘗試具有頂面和留下來的「.navbar李：懸停UL」，它會顯示值類似下面的屏幕截圖

代碼：

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
    position: relative; 
} 

.navbar a {       
     color: #FFF; 
     display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

.navbar li ul { 
    position: absolute; 
    display: none; 
    left: 100%; 
    padding: 0; 
    top: 0; 
}    

.navbar li:hover > ul { 
    display: block; 
}

希望它有幫助。

來源

2017-03-08 11:37:13 ChiranjeeviIT

如果它在工作，那麼它並不意味着它是一個解決方案。你有硬編碼的「左」和「頂」位置是錯誤的。使用此解決方案時，只要調整窗口大小，下拉菜單的位置就不正確。 –

@MuhammadUsman是的你是正確的，但它只是一個示例代碼，使其工作。我們需要製作動態邏輯，根據菜單條目和深度在腳本中設置左側和頂部。這可以基於他的腳本語言。 – ChiranjeeviIT

這裏我們不需要腳本。檢查這[小提琴]（https://jsfiddle.net/eagqxnaz/3/） –

I think this would be a better solution: 

Just update your css as given below : 

.navbar { 
    margin: 0; 
    padding: 0; 
} 

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
    position: relative; 
} 

.navbar a { 
    color: #FFF; 
    display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

ul.navbar li ul { 
    margin: 0; 
    padding: 0; 
    top: 0; 
    left: 100%; 
    position: absolute; 
    display:none; 
} 

.navbar li:hover ul { 
    display:block; 
} 

Hope this is helpful.

來源

2017-03-08 13:03:26 Ram

如何將垂直位置放置在垂直CSS菜單的左側或右側？

回答

相關問題