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

当你：悬停钓鱼指南时，你正在显示钓鱼技巧。钓鱼技巧隐藏了导航的其余部分，它位于顶部。您应将其定位，使其显示在主导航下方。卡尔是对的，bootstrap是构建这些类型的东西的重要资源。

我在制作下拉导航时缺少什么？

1 个答案: