ドロップダウンリストが機能しないhtml css

私は問題があり解決できません。このHTMLページを作成しましたが、セレクタを#dropに設定しても機能しません。ドロップダウンリストが機能しないhtml css

#drop { 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: #4CAF50; 
 
    padding: 10px; 
 
} 
 
#droplist { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
#droplist a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: olivedrab; 
 
    padding: 10px; 
 
} 
 
#drop:hover #droplist { 
 
    display: block; 
 
} 
 
#droplist a:hover { 
 
    background-color: olive; 
 
}

<!DOCTYPE html> 
 
<html lang="it"> 
 
<!-- ... --> 
 
<body> 
 
    <div id="pagina"> 
 
     <div id="drop">Hover for open the menu</div> 
 
     <div id="droplist"> 
 
      <a href="#a">Link 1</a> 
 
      <a href="#b">Link 2</a> 
 
      <a href="#c">Link 3</a> 
 
     </div> 
 
     <br/>text text text text text text text text text 
 
    </div> 
 
</body> 
 
</html>

私はID #dropでdivの上にカーソルを移動しようとするが、要素#droplistは表示されません。

出典

2017-08-05 Matteo

は#dropの子ではないため、#drop:hover #droplistを選択することはできません。

代わりに#drop:hover + #droplistを使用してください。

element1 + element2セレクタはelement1

#drop { 
 
    display: inline-block; 
 
    color: white; 
 
    background-color: #4CAF50; 
 
    padding: 10px; 
 
} 
 

 
#droplist { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
#droplist a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: olivedrab; 
 
    padding: 10px; 
 
} 
 

 
#drop:hover+#droplist { 
 
    display: block; 
 
} 
 

 
#droplist a:hover { 
 
    background-color: olive; 
 
} 
 

 
#droplist:hover { 
 
    display: block 
 
}

<!DOCTYPE html> 
 
<html lang="it"> 
 
<!-- ... --> 
 

 
<body> 
 
    <div id="pagina"> 
 
    <div id="drop">Hover for open the menu</div> 
 
    <div id="droplist"> 
 
     <a href="#a">Link 1</a> 
 
     <a href="#b">Link 2</a> 
 
     <a href="#c">Link 3</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

EDIT直後に配置されているすべてのelement2を選択し、スタイルするために使用されます：あなたは

#droplist:hover { 
    display: block 
}

に追加したい場合があります

ドロップダウンメニューが消えないようにしてください。

出典

2017-08-05 20:16:24 Ivan

マッテオは、上記の私の編集を見てください。あなたのコードに '#droplist：hover {display：block}'を追加してください。また、将来のユーザーのために回答をアップアップして受け入れることを検討してください。ありがとう！ – Ivan

ドロップダウンリストが機能しないhtml css

答えて

関連する問題