为什么当我悬停时菜单栏不显示？

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>