55

幅が柔軟な HTML/CSS ドロップダウン メニューを構築しようとしています。ナビゲーションの第 2 レベルのposition:absoluteため、第 1 レベルの幅が得られません。position:absolute を削除すると、ホバー時に後続のすべての要素が移動します...

どうすればこれを解決できますか?

コードは次のとおりです。

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

.level_1 > li {
  float: left;
  width: 45%;
  background-color: #2FA4CF;
  margin-right: 6px;
}

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

.level_2 {
  display: none;
  position: absolute;
  width: 45%;
}

.level_2 li {
  background-color: #535B68;
}
<ul class="level_1">
  <li>
    <a href="#">Level one (1)</a>
    <ul class="level_2">
      <li><a href="#">Level two (1)</a></li>
    </ul>
  </li>
  <li><a href="#">Level one (2)</a></li>
</ul>

<p>Paragraph</p>

ここで結果を参照してください：http://jsfiddle.net/5uf2Y/ 「レベル1（1）」にカーソルを合わせると、2番目のレベルが最初のレベルと同じサイズではないことがわかります...

4

4 に答える 4

82

100% 表示するための 2 つの要素を忘れています。

ここで訂正

最初の要素はそれを忘れています: level_1 > li の相対的な位置

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

2番目の要素の修正です： 2番目のliのサイズを変更

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

" width:100%" をオン.level_2にすると、親の幅で自動的に表示されます。

于 2013-05-14T14:50:54.990 に答える
13

position:relativeに追加level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    position:relative;
}
于 2013-05-14T14:51:45.100 に答える
0

プロパティを設定してみてくださいbody { width:100%;}。以下に示すように、この問題が修正されます (元の CSS に追加されます)。

body{ width:100%;}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
}
.level_1 > li:hover ul {
    display: block;
}
.level_2 {
    display: none;
    position: absolute;
    width: 45%;
}

.level_2 li {
    background-color: #535B68;
}
于 2013-05-14T14:55:14.510 に答える