CSSの表示 - 幅メニュー李

Question

上のホバー私は私のメニューとサブメニュー

マイメニューとCSSの幅の問題を抱えているがhorizo​​ntalyのようなものです - <li>のときホバー<li>の幅は、自動で

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

ディスプレイが、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>