html - 我在制作下拉导航时错过了什么？

Question

如上所述，我在编码(html 和 CSS)中没有看到什么可以在我的导航栏中创建标准列表下拉菜单？

当我在 Chrome 和 IE 中预览页面的这一部分时，导航部分看起来很好，直到我将鼠标悬停在“钓鱼”和“指南”链接上。当它应该显示主要部分以及特定主题中的不同子部分时，它会隐藏其他选择。

我是否还需要合并 jquery 才能使其正常工作？

#topnav {
  background-color: #333333;
  clear: both;
  border-bottom: 3px #cccccc solid;
  overflow: hidden;
}
#topnav ul {
  width: 100%;
  float: left;
  margin: 0px;
  background-color: #333333;
  position: relative;
}
#topnav ul li {
  display: inline
}
#topnav ul li a {
  float: left;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}
#topnav a:visited {
  color: #ffffff;
}
#topnav a:active {
  color: #ffffff;
}
#topnav a:hover {
  color: #ffffff;
  background-color: maroon;
}
#topnav a:focus {
  color: #ffffff;
}
#topnav ul li img {
  vertical-align: middle;
  padding-left: 8px;
  width: 22px;
  height: 18px;
}
#topnav ul li:hover ul {
  display: block;
}
#topnav ul ul {
  display: none;
  position: absolute;
  background-color: #333333;
  border: 5px #333333 solid;
  border-top: 0px;
  margin-left: -5px;
  min-width: 100px;
}
#topnav ul ul li {
  display: block
}
#topnav ul ul li a:visited {
  color: #ffffff;
}
#topnav ul ul li a:hover {
  color: #ffffff;
  background-color: maroon;
}
#topnav ul ul li a:focus {
  color: #ffffff;
}

<div id="topnav">
  <ul>
    <li><a href="index.html"> Home</a>
    </li>
    <li>
      <a href="fishing.html"> Fishing &amp; Guides<img src="Images/bearpawwhitenav.png"/></a>
      <ul>
        <li><a href="fishing_tips.html">Fishing Tips</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="accommodations.html"> Accommodations</a>
    </li>
    <li>
      <a href="area.html"> Area &amp; History</a>
    </li>
    <li>
      <a href="rates.html"> Rates</a>
    </li>
    <li>
      <a href="contact.html"> Contact</a>
    </li>
  </ul>
</div>

Answer 1

当您将 :hover 钓鱼指南时，您会显示钓鱼技巧。钓鱼技巧隐藏了您导航的其余部分，它位于顶部。您应该将其放置在主导航下方。 Carl 是对的，bootstrap 是构建这类东西的重要资源。