どういうわけか動作しないドロップダウンメニュー

私はW3Schoolsを使い、ドロップダウンメニューのコーディング構造を理解しようとしました。ページを開いてカーソルを 'Merch'テキストに移動すると、ドロップダウンメニューが表示されます。しかし何らかの理由で、それは表示されていません。私のために増幅し、私が間違っていた場所を教えてください。どういうわけか動作しないドロップダウンメニュー

あなたはCSSでこの変更を必要とする

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
ul { 
    margin: 0; 
    overflow: hidden; 
    background-color: dimgray; 
    list-style-type: none; 
} 

li { 
    float: left; 
} 

li a { 
    text-decoration: none; 
    font-family: sans-serif; 
    display: inline-block; 
    color: white; 
    padding: 12px; 
} 

li a:hover { 
    background-color: gray; 
} 

#dropdown { 
    position: absolute; 
    display: none; 
    background-color: darkgray; 
    min-width: 140px; 
} 

#dropdown a { 
    color: white; 
    text-align: left; 
    padding: 10px; 
    display: block; 
    text-align: left; 
} 

#dropdown a:hover { 
    background-color: gray; 
} 

#dropbtn:hover #dropdown { 
    display: block; 
} 
    </style> 
    </head> 
    <body> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#" id="dropbtn">Merch</a> 
     <div id="dropdown"> 
      <a href="#">Shirts</a> 
      <a href="#">Pants</a> 
     </div> 
     </li> 
     <li><a href="#">About Us</a></li> 
    </ul> 
    </body> 
</html>

出典

2017-01-12 JRB

#dropbtn:hover + #dropdown { 
    display: block; 
}

ドロップダウンが子供ではない、それはそう、このselectorはそれを見つけるでしょう、あなたの現在のHTMLの設定では次の要素です。

または、良く、li要素（親）の場所ID：

<ul> <li><a href="#">Home</a></li> <li id="dropbtn"><a href="#" >Merch</a> <div id="dropdown"> <a href="#">Shirts</a> <a href="#">Pants</a> </div> </li> <li><a href="#">About Us</a></li> </ul> #dropbtn:hover #dropdown { display: block; }

デモ：https://jsfiddle.net/3bfgzf37/

あなたが最初のソリューション、ドロップダウン。消えるの高速を使用する場合は、奇妙な振る舞い.. 。説明：ホバーをに、をに、をドローダウン（aは兄弟）にホバー、liエレメントにホバー、同時にホバードロップダウン（親子、ドロップダウンは「内側」です - それは一貫性のある、望ましい動作を生み出します）。

2番目の方が優れています。

ul { margin: 0; overflow: hidden; background-color: dimgray; list-style-type: none; } li { float: left; } li a { text-decoration: none; font-family: sans-serif; display: inline-block; color: white; padding: 12px; } li a:hover { background-color: gray; } #dropdown{ position: absolute; display:none; background-color: darkgray; min-width: 140px; } #dropdown a { color: white; text-align: left; padding: 10px; display: block; text-align: left; } #dropdown a:hover { background-color: gray; } #dropbtn:hover #dropdown { display: block; }

<ul> <li><a href="#">Home</a></li> <li id="dropbtn"><a href="#" >Merch</a> <div id="dropdown"> <a href="#">Shirts</a> <a href="#">Pants</a> </div> </li> <li><a href="#">About Us</a></li> </ul> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

出典

2017-01-12 01:05:58 sinisake

うわー！ありがとうございました！ IDがa要素に入力されたことはわかりませんでした。 – JRB

あなたのスタイルタグは、headタグの外にする必要があります。さらに、このコードのドロップダウンが今すぐ動作します。色を少し変えてみてください。 :)

<html> 
<head></head> 
<style> 
ul { 
    margin: 0; 
    overflow: hidden; 
    background-color: dimgray; 
    list-style-type: none; 
}  
li { 
    float: left; 
} 
li a { 
    text-decoration: none; 
    font-family: sans-serif; 
    display: inline-block; 
    color: white; 
    padding: 12px; 
} 
/* Dropdown Button */ 
.dropbtn { 
background-color: #4CAF50; 
color: white; 
padding: 16px; 
font-size: 16px; 
border: none; 
cursor: pointer; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
display: block; 
} 

/* Change the background color of the dropdown button when the dropdown  content is shown */ 
.dropdown:hover .dropbtn { 
background-color: gray; 
} 
</style> 
<body> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li> 
     <div class="dropdown"> 
     <button class="dropbtn">Merch</button> 
     <div class="dropdown-content"> 
      <a href="#">Shirts</a> 
      <a href="#">Pants</a> 
     </div> 
     </div> 
    </li> 
    <li><a href="#">About Us</a></li> 
</ul> 
</body> 
</html>

出典

2017-01-12 01:20:56

どういうわけか動作しないドロップダウンメニュー

答えて

関連する問題