爲什麼當我懸停時菜單欄不顯示？

Question

當我將鼠標懸停在'開始'上時，應該顯示下拉菜單，但不是。當我刪除顯示：沒有鏈接顯示，但當我試圖顯示，因爲我懸停它不顯示。我如何解決這個問題（CSS代碼）？ CSS嵌入在樣式標籤中。

nav ul { 
 
    background: url(transparent.png); 
 
    width: 100%; 
 
    height: 52px; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav ul li { 
 
    display: inline; 
 
} 
 

 
nav ul li a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    letter-spacing: 0.2em; 
 
    font: normal 100% arial, sans-serif; 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 10px 0 0 10px; 
 
    padding: 9px 26px 9px 26px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav ul li a:hover { 
 
    color: #000; 
 
    background-color: #fff; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    background: #f9f9f9; 
 
    min-width: 160px; 
 
    position: absolute; 
 
    display: none; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background: #bada55; 
 
} 
 

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

<header> 
 
    <h1>Model United Nations Conference</h1> 
 
    <img src="dove.png" alt="a simple dove logo"> 
 

 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a id="start" href="#">Get started</a></li> 
 
     <li class="dropdown"> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
     </li> 
 
     <li><a href="#">Gallery</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
     <li><a href="#">Forum</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

林不知道究竟是什麼錯。

Answer 1

更改下拉的HTML結構：

<li class="dropdown"><a id="start" href="#">Get started</a> 
     <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     </div> 
     </li> 

隨着當前結構即：

<li><a id="start" href="#">Get started</a></li> 
    <li class="dropdown"> 
    <div class="dropdown-content"> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
    </div> 
    </li> 

的.dropdown永遠不會因爲li元的摺疊尺寸的懸浮效果。 演示：http://jsfiddle.net/lotusgodkk/GCu2D/2163/

Answer 2

您的HTML結構需要一些調整。

基本上，將下拉菜單嵌套在li內。

nav ul { 
 
    background: url(transparent.png); 
 
    width: 100%; 
 
    height: 52px; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav ul li { 
 
    display: inline; 
 
} 
 

 
nav ul li a { 
 
    text-decoration: none; 
 
    /*changed for demo*/ 
 
    color: #000; 
 
    letter-spacing: 0.2em; 
 
    font: normal 100% arial, sans-serif; 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 10px 0 0 10px; 
 
    padding: 9px 26px 9px 26px; 
 
    text-transform: uppercase; 
 
} 
 

 
nav ul li a:hover { 
 
    color: #000; 
 
    background-color: #fff; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
} 
 

 
.dropdown-content { 
 
    background: #f9f9f9; 
 
    min-width: 160px; 
 
    position: absolute; 
 
    left: 0; 
 
    display: none; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    height: auto; 
 
} 
 

 
.dropdown-content li { 
 
    display: block; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background: #bada55; 
 
} 
 

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

<header> 
 
    <h1>Model United Nations Conference</h1> 
 
    <img src="dove.png" alt="a simple dove logo"> 
 

 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li class="dropdown"><a id="start" href="#">Get started</a> 
 
     <ul class="dropdown-content"> 
 
      <li><a href="#">Link 1</a></li> 
 
      <li><a href="#">Link 2</a></li> 
 
      <li><a href="#">Link 3</a></li> 
 
     </ul> 
 
     </li> 
 

 
     <li><a href="#">Gallery</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
     <li><a href="#">Forum</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>