当我将鼠标悬停在屏幕上时，为什么菜单栏不显示？

Question

当我将鼠标悬停在“开始”状态时，应显示下拉菜单。但它并没有。当我删除显示时：没有链接显示，但当我尝试显示时，我没有显示它。我该如何解决这个问题（css代码）？ css嵌入在样式标记中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我不确定到底出了什么问题。

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中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;