web-dev-qa-db-ja.com

親コンテナのCSSの絶対位置と幅（パーセント単位）

幅が柔軟なHTML/CSSドロップダウンメニューを作成しようとしています。による position:absoluteナビゲーションの第2レベルでは、第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番目のレベルが表示されます。最初のレベルと同じサイズではありません...

htmlcssdrop-down-menucss-position
35
chris

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親の幅に合わせて自動的に回転します

54
artSx

position:relativeをlevel_1 > liに追加します

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

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;
}
0
Alexander Bell

ちょっとあなたはあなたの最初の行に6pxのマージンを持っていますli右ではなく左のマージンを使用します。これで間隔が修正されます。

0
Cam