HTML/CSS下拉菜單沒有顯示

Question

我想創建一個有絕對div箱子的下拉導航，有visibility:none，但我想當我懸停時，我沒有使用正確的元素。任何幫助？我認爲問題出在代碼的最後一部分。感謝

.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; 
} 

編輯：

移動鼠標指針到它時保持菜單中打開，你需要給懸停選擇到集裝箱分區。

我已經改變了CSS的最後一位，以選擇「nav-whats-new」類中的'li'元素，並且我使用了懸停選擇器來更改'nav-level- 2' 元素 -

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

這裏是更新的小提琴 -

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

Answer 2

您需要在懸停添加visibility:visible和懸停後添加+符號作爲子菜單的div是錨之外。 li>a:hover .nav-level-2至li>a:hover + .nav-level-2。 +引用了懸停元素的下一個元素。

.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>

你要懸停的最新消息後，顯示哪些DIV