CSS顯示-將鼠標懸停在Width菜單上

Question

我的菜單和子菜單有CSS寬度問題

我的菜單像-

<ul>
<li> Menu <div style="diplay:none"> Submenu </li>
<li> Menu <div style="diplay:none"> Submenu </li>
</ul>

<li>的寬度是自動的，當將鼠標懸停在<li>上時，但當div寬度大於<li> ，會有一個間隙

我希望<li>寬度在我每次懸停時都不會移動

您有懸停時保持<li>寬度固定的解決方案嗎？

謝謝

Answer 1

通常，下拉菜單絕對位於其相對放置的父元素內，因此它們不會占用任何空間。

這是一個基本的例子。 根據您的需求進行修改。

 ul, li { margin: 0; padding: 0; } .menu li { display: inline-block; background-color: rgba( 123, 123, 123, 1 ); cursor: pointer; } .menu li:hover { background-color: rgba( 123, 123, 123, 0.5 ); } .has-submenu { position: relative; } .has-submenu li { display: block; } .has-submenu > ul { display: none; position: absolute; width: 100%; } .has-submenu:hover > ul { display: block; } 

 <ul class="menu"> <li>Item</li> <li class="has-submenu"> Item with submenu <ul> <li>Item</li> <li>Item</li> </ul> </li> <li>Item</li> </ul>