0

CSS ドロップ ダウン メニューを作成しようとしていますが、問題は、写真でわかるように、子リスト項目が親リスト項目と重なることです。

問題の原因はパディングであることがわかりました: 10px 5px; 12行目 - 削除すると、問題は解決します。しかし、見た目にはパディングが必要です。同様の問題に対処するインライン要素とパディングを読みましたが、記事で提供されている解決策でさえ- float: left;を使用しています。表示の代わりに: インライン; - 私の問題は解決しません。

なぜこれが起こり、解決策は何ですか？

HTML コード

<ul id="navigation_2">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a>
     <ul>
        <li>Who We Are</li>
        <li>Our Goal</li>
    </ul>
  </li>
</ul>

CSSコード

ul#navigation_2 
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
4

1 に答える 1

2

ここに、実際の例があります：

http://jsfiddle.net/hzCZY/2/

の力を決して過小評価しないでくださいinline-block！基本的に、あなたのリストは、テキスト「About」の周りの赤いボックスではなく、テキスト「About」と衝突していました。実際のaタグを代わりに赤いブロック、にフォーマットinline-blockし、その下の と正しく衝突しましulた。

さらに説明が必要な場合は、喜んでお手伝いします。

于 2012-05-08T10:12:59.940 に答える