liの背景色が全体の幅に及ぶようにするCSS

Question

これはおそらく簡単な解決策ですが、私はこれに頭を悩ましています。私は別のulを開く李の上にマウスを乗せようとしています。そして、ulの上をぐるぐると、その背景はulの背景の全幅を占めます。

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    z-index: 1000; 
 
} 
 

 
li { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
ul>li { 
 
    color: #000000; 
 
    float: left; 
 
    padding: 10px; 
 
    height: 22px; 
 
} 
 

 
ul>li a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
ul>li li { 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
ul>li ul { 
 
    display: none; 
 
    left: 0; 
 
    top: 100%; 
 
} 
 

 
ul>li li>ul { 
 
    top: 0; 
 
    left: 100%; 
 
} 
 

 
li>ul { 
 
    position: absolute; 
 
    min-width: 100%; 
 
    display: none; 
 
    background: #f0f0f0; 
 
    list-style: none; 
 
} 
 

 
li:hover>ul, 
 
li:focus>ul { 
 
    display: block; 
 
} 
 

 
li:hover { 
 
    background: #27B3CF; 
 
    outline: 1px dotted red; 
 
}

<ul> 
 
    <li style="color: white;">Reports 
 
    <ul> 
 
     <li>Lvl 1</li> 
 
     <li><span class="title">Show a List</span> 
 
     <ul> 
 
      <li><a href="#">Details</a></li> 
 
     </ul> 
 
     </li> 
 
     <li>Lvl 1</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Iは表示用いて試みた：ブロック。できるだけ多くの理由で私はバックグラウンドの幅をドロップダウンの幅に広げられません。私はまだ初心者であり、正しい方向に私を導く助けを借りることができます。この調整を行うためにCSSを追加できる場所がわかりますか？どんな助けでも大歓迎です。

Answer 1

リスト項目に固定幅を指定すると、テキストとパディングのサイズに対して、背景色がその幅で表示されます。ここで

が ul>liクラスに以下の追加により、スニペットです：

width: 50px;

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    z-index: 1000; 
 
} 
 

 
li { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
ul>li { 
 
    color: #000000; 
 
    float: left; 
 
    padding: 10px; 
 
    height: 22px; 
 
    width: 50px; 
 
} 
 

 
ul>li a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
ul>li li { 
 
    float: left; 
 
    clear: left; 
 
} 
 

 
ul>li ul { 
 
    display: none; 
 
    left: 0; 
 
    top: 100%; 
 
} 
 

 
ul>li li>ul { 
 
    top: 0; 
 
    left: 100%; 
 
} 
 

 
li>ul { 
 
    position: absolute; 
 
    min-width: 100%; 
 
    display: none; 
 
    background: #f0f0f0; 
 
    list-style: none; 
 
} 
 

 
li:hover>ul, 
 
li:focus>ul { 
 
    display: block; 
 
} 
 

 
li:hover { 
 
    background: #27B3CF; 
 
    outline: 1px dotted red; 
 
}

<ul> 
 
    <li >Reports 
 
    <ul> 
 
     <li>Lvl 1</li> 
 
     <li><span class="title">Show a List</span> 
 
     <ul> 
 
      <li><a href="#">Details</a></li> 
 
     </ul> 
 
     </li> 
 
     <li>Lvl 1</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

あなたは一定の幅を設定することができない場合は、取り除くことができますfloat：ul> li liセレクタに残して、float：noneと設定します。私が開発者用ツールでテストしても、その要素に浮動小数点を持つ特別な理由はわかりません。