navbaのCSSを使用したシンプルなドロップダウンメニュー

Question

複数のリンクを持つナビゲーションバーに単純なドロップダウンメニュー（CSSのみ）を作成しようとしていますが、ドロップダウンメニューはすべてのリンクで表示されます。希望のもの。ここでは、コードは次のとおりです。

HTML & CSS

ul { 
 
    list-style: none; 
 
} 
 

 
.topNav { 
 
    background-color: #ff66b3; 
 
    overflow: hidden; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
} 
 

 
.topNav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 8px; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
} 
 

 
.topNav a:hover { 
 
    background-color: #ffb3d9; 
 
    color: black; 
 
} 
 

 
.dropDown { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
    min-width: 160px; 
 
} 
 

 
.dropDown a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.topNav .mainLink:hover .dropDown { 
 
    display: block; 
 
}

<div class="topNav" id="myTopnav"> 
 
    <a class="mainLink" id="menuIcon" href="#home">&#9776</a> 
 
    <a class="mainLink" href="#home">NerdBook</a> 
 
    <div class="dropDown"> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    </div> 
 
</div>

ドロップダウンは、唯一の "menuIcon" のリンクを表示するようになります。

Answer 1

タグに既にIDを持っていて、:hoverをトリガーしたい場合は、リファレンスセレクタとして使用してください。

#menuIcon：.dropDownが兄弟として一致するように変更し、あなたのリンクの子をins'tため、また、あなたのコードが動作しないホバー〜.dropDown

ul { 
 
    list-style: none; 
 
} 
 
.topNav { 
 
    background-color: #ff66b3; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    position: relative; 
 
} 
 
.topNav:after { 
 
    content:""; 
 
    display:table; 
 
    clear:both; 
 
} 
 
.topNav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 8px; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
} 
 
.topNav a:hover { 
 
    background-color: #ffb3d9; 
 
    color: black; 
 
} 
 
.dropDown { 
 
    background:#e1e1e1; 
 
    display: none; 
 
    position: absolute; 
 
    top:100%; 
 
    z-index: 1; 
 
    min-width: 160px; 
 
} 
 

 
.dropDown a { 
 
    float:none; 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
#menuIcon:hover ~ .dropDown, .dropDown:hover { 
 
    display: block; 
 
}

<div class="topNav" id="myTopnav"> 
 
    <a class="mainLink" id="menuIcon" href="#home">&#9776</a> 
 
    <a class="mainLink" href="#home">NerdBook</a> 
 
    <div class="dropDown"> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    </div> 
 
</div>