1

優れたナビゲーション バーを作成するための理解を深めるために、独自のナビゲーション バーを作成しようとしています。リンクにカーソルを合わせたときに背景を変更するとともにバーを作成しましたが、タグ li にカーソルを合わせたときにドロップダウン メニュー (サブメニュー) を追加できませんでした。サブメニューのコンテンツ用のボックスを作成しましたが、何らかの理由で表示できません。以下に私のコードを含めました。私が欲しいのは、liタグが上に置かれたときにクラスのサブカテゴリが表示されるようにすることです。また、私のコードが適切にフォーマットされていない場合は、事前にお詫び申し上げます。これは、stackoverflow に関する私の最初の質問です。

#navbar ul {
list-style-type:none;
color: #000;
padding: 0px;
text-align: center;
}
li:hover {
background-color: #0C0;
padding: 16.5px .1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.subcategory {
display: none;
width: 100px;
height: auto;
background-color: #FC0;
color: #03F;
position: absolute;
top: 100px;
}
li:hover .subcategory {
display: block;
}
#navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #FC0;
float: left;
font-family: Arial, Helvetica, sans-serif;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
padding: 0 1.5em;
text-decoration: none;
}
<div id="navbar">
<ul> 
    <li><a href="#">LinkHere</a></li>
        <div class="subcategory">Hey</div>
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
    <li><a href="#">LinkHere</a></li> 
</ul> 
</div>
4

1 に答える 1

0

あなたの.subcategory要素は の子ではないliため、表示されません。

<ul> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory">Hey</div></li>
</ul>
于 2012-10-03T01:51:50.333 に答える