CSSを使用したドロップダウンメニューの作成

タイトルの上にマウスを置いたときに表示されるドロップダウンメニューを作成しています。私はw3schoolsに関するいくつかの指示に従っていましたが、私のコードは機能しません。なぜ、どのように修正するのか分かりません。すべての答えは高く評価されます。ここに私のコードは次のとおりです。CSSを使用したドロップダウンメニューの作成

.dropdown { 
 
    display: block; 
 
    position: relative; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 
    <div class="menu"> 
 
    <h2 class="dropdown">Menu</h2> 
 
    <div class="dropdown-content"> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Content</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2016-12-10 Brother Eye

要素<div class="dropdown-content">...</div>がその子孫であるため、ラッパーにホバースタイル、つまり<div class="menu">...</div>を記述する必要があります。

また、ドロップダウンメニューを開くために使用される要素にdisplay: inline-block;を指定すると、<h2 class="dropdown">Menu</h2>です。これにより、カーソルが上に来たときにドロップダウンメニューが開いたままになり、ユーザーがオプションを選択できるようになります。

以下のコードスニペットを確認してください。

.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
.menu:hover .dropdown-content { 
 
    display: block; 
 
}

<div class="menu"> 
 
    <h2 class="dropdown">Menu</h2> 
 
    <div class="dropdown-content"> 
 
    <ul> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Content</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

出典

2016-12-10 11:02:07

ああ...私はそれを得た！どうもありがとう！ –

も卑劣なバグが

.dropdown:hover+.dropdown-content { 
    display: block; 
}

.dropdownと.dropdown-content

彼らは兄弟ない親子

ですあなたのhtmlの

インデントは

出典

2016-12-10 10:51:28

も...編集者はそれが非常に困難完璧なインデント...少なくとも私のためを取得するために作る...、どのような方法をありがとう！ –

このcodepen ...

を試してみてくださいを欺いている実際にあなたがミスをやっている、あなたは何をしているかホバーであなたの見出しの兄弟を示さなければならないさにスタイルを適用すること.dropdown:hover .dropdown-content {display: block;}です私たちは+のように使用しなければなりません。.dropdown:hover + .dropdown-content {display: block;}。

ご理解いただきますようお願いいたします。

出典

2016-12-10 10:54:13

CSSを使用したドロップダウンメニューの作成

答えて

関連する問題