ナビゲーションバーのドロップダウンメニューから何もドロップしないHTML CSS

Question

私は他の質問を見てきましたが、私が持っている問題を説明するものはありません。私は既存のナビゲーションバーにドロップダウンメニューを作成したいのですが、私はそれがクラスに名前を付けた方法に問題があると思います。ここで

は、ナビゲーションバー

<ul class="customMenu"> 
    <li class="customList"><a class="menuActif" href="#">Home</a></li> 
    <li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a></li> 
    <div class="extendedDiv"> 
     <a href="...">Paris</a> 
     <a href="...">Lyon</a> 
     <a href="...">Toulouse</a> 
    </div> 
    <li class="customList"><a href="#">Phrases</a></li> 
    <li class="customList"><a href="#">Bank Accounts</a></li> 
    <li class="customList"><a href="#">Important Notes</a></li> 
    <li class="customList"><a href="#">CAF</a></li> 
    <li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li> 
</ul> 

のための私のHTMLコードであり、ここで私が実装しようとしたCSSです：

.customMenu { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #00264d; 
position: fixed; 
top: 0; 
width: 100%; 
} 
.customList { 
    float: left; 
} 

.customList a, .extendMenu{ 
    font-family: Sans Serif; 
    font-size: 23px; 
    text-decoration: none; 
    text-align: center; 
    padding: 16px 17px; 
    display: block; 
    color: white; 
} 

.customList a:hover, .extendMenuClass:hover .extendMenu{ 
    background-color: #00264d; 
    color: red; 
} 

.menuActif{ 
    background-color: red; 
    color: red; 
} 

.menuActif:hover{ 
    background-color: white; 
    color: #00264d; 
} 

.customList.extendMenuClass{ 
    display: inline-block; 
} 

.extendedDiv{ 
    display: none; 
    background-color: #00264d; 
    position: absolute; 
    min-width: 200px; 
    box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.extendedDiv a{ 
    display: block; 
    color: white; 
    padding: 15px 15px; 
} 

.extendedDiv a:hover{ 
    color: red; 
} 

.extendMenuClass:hover .extendedDiv{ 
    display: block; 
} 

私がそうでなければ動作しますが、メニューは単にドロップダウンしません。 。誰も助けることができますか？どうもありがとう！

Answer 1

ホバー上のメニューを表示するセレクタが.extendMenuClass:hover .extendedDivですが、.extendedDivは.extendMenuClassの子ではありません。それが子供であり、セレクターが機能するように更新されました。

その後、あなたは.extendedDivは、/以下.customMenuの外に出血し、オーバーフローが隠されている場合は非表示になりますので、.customMenuからoverflow: hidden;を削除する必要があります。

.customMenu { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
background-color: #00264d; 
 
position: fixed; 
 
top: 0; 
 
width: 100%; 
 
} 
 
.customList { 
 
    float: left; 
 
} 
 

 
.customList a, .extendMenu{ 
 
    font-family: Sans Serif; 
 
    font-size: 23px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    padding: 16px 17px; 
 
    display: block; 
 
    color: white; 
 
} 
 

 
.customList a:hover, .extendMenuClass:hover .extendMenu{ 
 
    background-color: #00264d; 
 
    color: red; 
 
} 
 

 
.menuActif{ 
 
    background-color: red; 
 
    color: red; 
 
} 
 

 
.menuActif:hover{ 
 
    background-color: white; 
 
    color: #00264d; 
 
} 
 

 
.customList.extendMenuClass{ 
 
    display: inline-block; 
 
} 
 

 
.extendedDiv{ 
 
    display: none; 
 
    background-color: #00264d; 
 
    position: absolute; 
 
    min-width: 200px; 
 
    box-shadow: 10px 10px 10px 2px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.extendedDiv a{ 
 
    display: block; 
 
    color: white; 
 
    padding: 15px 15px; 
 
} 
 

 
.extendedDiv a:hover{ 
 
    color: red; 
 
} 
 

 
.extendMenuClass:hover .extendedDiv{ 
 
    display: block; 
 
}

<ul class="customMenu"> 
 
    <li class="customList"><a class="menuActif" href="#">Home</a></li> 
 
    <li class="customList extendMenuClass"><a class="extendMenu" href="#">Cities</a> 
 
    <div class="extendedDiv"> 
 
     <a href="...">Paris</a> 
 
     <a href="...">Lyon</a> 
 
     <a href="...">Toulouse</a> 
 
    </div></li> 
 
    <li class="customList"><a href="#">Phrases</a></li> 
 
    <li class="customList"><a href="#">Bank Accounts</a></li> 
 
    <li class="customList"><a href="#">Important Notes</a></li> 
 
    <li class="customList"><a href="#">CAF</a></li> 
 
    <li class="customList" style="float:right"><a class="menuActif" onClick="verifDecon()">Déconnexion</a></li> 
 
</ul>

Answer 2

ナビゲーションのための一般的な構文は、他の順不同リスト内の順不同リストを入れ子にしています。

ので、あなたは次のようにそれを設定したい：

<ul class="main-nav"> 
    <li>1</li> 
    <li class="dropdown">2 
     <ul class="dropdown-list"> 
      <li>2.1</li> 
      <li>2.2</li> 
      <li>2.3</li> 
    </li> 
    <li>3</li> 
</ul> 

それは順番に親と子要素を維持するためにはるかに簡単です。

私はちょうどあなたが続くと継続的に項目を追加するために少し楽にそれを設定：

HTML：

<ul class="customMenu"> 
    <li style="background:red;"><a href="#">Home</a></li> 
    <li class="extend"><a href="#">Cities</a> 
     <ul class="dropdown"> 
      <li><a href="#">Paris</a></li> 
      <li><a href="#">Lyon</a></li> 
      <li><a href="#">Toulouse</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Phrases</a></li> 
    <li><a href="#">Bank Accounts</a></li> 
    <li><a href="#">Important Notes</a></li> 
    <li><a href="#">CAF</a></li> 
    <li style="background: red; float: right;"><a href="#">Déconnexion</a></li> 
</ul> 

CSS：応答のための

ul.customMenu { 
    width: 100%; 
    background: #00264d; 
} 
ul.customMenu li { 
    display: inline-block; 
} 
ul.customMenu li a { 
    display: block; 
    font-size: 23px; 
    color: #fff; 
    text-decoration: none; 
    padding: 16px 17px; 
} 
ul.customMenu li a:hover { 
    color: red; 
} 
ul.customMenu li ul.dropdown { 
    display: none; 
    position: absolute; 
    top: 55px; 
    left: -5px; 
    background: red; 
    overflow: hidden; 
} 
ul.customMenu li ul.dropdown li a { 
    display: block; 
    width: 100%; 
    padding: 16px 20px; 
} 
ul.customMenu li ul.dropdown li a:hover { 
    color: #fff; 
    background: #cc0000 !important; 
} 

li.extend { 
    position: relative; 
} 
li.extend:hover ul.dropdown { 
    display: block !important; 
}