HTML/CSSドロップダウンナビゲーションメニューが表示されない

Question

visibility:noneのdivボックスアブソリュートを持つドロップダウンリストを作成しようとしていますが、私がホバリングしているときに正しい要素を使用していないと思います。どんな助け？私は問題がコードの最後のセクションにあると思います。最後に感謝

.main-nav { 
 
    background: #000; 
 
    height: 30px; 
 
    position: relative; 
 
    overflow: visible; 
 
    z-index: 2; 
 
    width: 100%; 
 
    left: 0; 
 
    cursor: default; 
 
} 
 

 
.main-nav .inner{ 
 
    height: 100%; 
 
} 
 

 
.main-nav>.inner{ 
 
    text-align: justify; 
 
} 
 

 
.nav-links-container { 
 
    position: static; 
 
    /* background: red; */ 
 
    height: 100%; 
 
    
 
} 
 

 
.nav-links{ 
 
    padding: 0 0 0 3px; 
 
    display: inline; 
 
    margin-bottom: 20px; 
 
    overflow: hidden; 
 
    /*background-color: green; */ 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    /* background: blue; */ 
 
} 
 

 
li>a { 
 
    color: #FFF; 
 
    font-size: 12px; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    padding: 10px 9px 9px; 
 
    margin: 0 -3px; 
 
} 
 
li>a:hover { 
 
    background-color: white; 
 
    color:#000;  
 
} 
 

 
.nav-level-2 { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    border-bottom: 5px solid #000; 
 
    background: red; 
 
    text-align: left; 
 

 
} 
 

 
.nav-level-2-container { 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    -ms-flex: 0px 1px auto; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0px 1px auto; 
 
    flex: 0px 1px auto; 
 
} 
 

 
li>a:hover .nav-level-2{ 
 
    display: block; 
 
}

<nav class="main-nav"> 
 
    <div class="inner max-girdle-width"> 
 
    <div class="nav-links-container"> 
 
     <ul class="nav-links"> 
 
     <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a> 
 
      <div class="nav-level-2"> 
 
      <div class="nav-level-2-container row max-girdle-width"> 
 
       <div><a href="#">Submenu</a> </div> 
 
      </div> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

セレクタが正しくありません。あなたが指定したものは、ホバー上のアンカータグの中でクラス 'nav-level-2'を持つすべての要素を選択します。アンカータグの直後に置かれたdivを '+'セレクターで選択する必要があります。また、divを見えるようにします。

に終わりCSSコードを変更してみてくださいそれをするために -

li>a:hover + .nav-level-2{ 
    visibility: visible; 
} 

EDIT：そこにマウスポインタを移動したとき

開いたメニューを保つために、あなたはホバーセレクターを与える必要がありコンテナdivに移動します。

私はクラス 'nav-whats-new'で 'li'要素を選択するためにCSSの最後のビットを変更しました。また、その上にホバーセレクタを使用して 'nav- 2' 要素 -

https://jsfiddle.net/hbbaq9tf/3/

Answer 2

あなたがホバーにvisibility:visibleを追加し、サブメニューのdivは、アンカーの外にあるとして、ホバー後+シンボルを追加する必要があります -

li.nav-whats-new:hover .nav-level-2 { 
    visibility: visible; 
} 

ここでは、更新フィドルです。 li>a:hover .nav-level-2〜li>a:hover + .nav-level-2。 +は、ホバリングされた要素の次の要素を参照します。あなたは後に何が新しいのホバー表示したくないのdiv

.main-nav { 
 
    background: #000; 
 
    height: 30px; 
 
    position: relative; 
 
    overflow: visible; 
 
    z-index: 2; 
 
    width: 100%; 
 
    left: 0; 
 
    cursor: default; 
 
} 
 

 
.main-nav .inner{ 
 
    height: 100%; 
 
} 
 

 
.main-nav>.inner{ 
 
    text-align: justify; 
 
} 
 

 
.nav-links-container { 
 
    position: static; 
 
    /* background: red; */ 
 
    height: 100%; 
 
    
 
} 
 

 
.nav-links{ 
 
    padding: 0 0 0 3px; 
 
    display: inline; 
 
    margin-bottom: 20px; 
 
    overflow: hidden; 
 
    /*background-color: green; */ 
 
} 
 

 
li { 
 
    vertical-align: top; 
 
    padding: 5px; 
 
    display: inline-block; 
 
    /* background: blue; */ 
 
} 
 

 
li>a { 
 
    color: #FFF; 
 
    font-size: 12px; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    padding: 10px 9px 9px; 
 
    margin: 0 -3px; 
 
} 
 
li>a:hover { 
 
    background-color: white; 
 
    color:#000;  
 
} 
 

 
.nav-level-2 { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0; 
 
    width: 100%; 
 
    height: auto; 
 
    border-bottom: 5px solid #000; 
 
    background: red; 
 
    text-align: left; 
 

 
} 
 

 
.nav-level-2-container { 
 
    padding-top: 40px; 
 
    padding-bottom: 40px; 
 
    -ms-flex: 0px 1px auto; 
 
    -webkit-box-flex: 0; 
 
    -webkit-flex: 0px 1px auto; 
 
    flex: 0px 1px auto; 
 
} 
 

 
li>a:hover + .nav-level-2{ 
 
    visibility:visible; 
 
}

<nav class="main-nav"> 
 
         <div class="inner max-girdle-width"> 
 
          <div class="nav-links-container"> 
 
           <ul class="nav-links"> 
 
            <li class="nav-whats-new"> 
 
             <a class="nav-level-1" href="#">What's New</a> 
 
             <div class="nav-level-2"> 
 
              <div class="nav-level-2-container row max-girdle-width"> 
 
               <div><a href="#">Submenu</a> 
 
                
 
                
 
               </div> 
 
              </div> 
 
             </div> 
 
             
 
            </li> 
 
           </ul> 
 
          </div> 
 
         </div> 
 
         
 
        </nav>