[分享]css中导航栏带有下拉框

今天我们来讲一下如何利用CSS制作一个带有下拉框的导航栏。首先，我们需要在HTML中添加一个ul列表来构建导航栏的框架，然后再在li中添加a标签来定义导航栏的每个选项。接着，我们在li中再添加ul列表...

今天我们来讲一下如何利用CSS制作一个带有下拉框的导航栏。
首先，我们需要在HTML中添加一个ul列表来构建导航栏的框架，然后再在li中添加a标签来定义导航栏的每个选项。接着，我们在li中再添加ul列表，这个ul列表中就是我们要实现下拉框的位置了。
HTML代码如下：

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a>
    <ul class="dropdown">
      <li><a href="#">Our Team</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Vision</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul> 

接下来，我们可以用CSS来实现导航栏的外观和下拉框效果。我们可以设置navbar类的样式来定义导航栏的基本样式，而dropdown类的样式是定义下拉框的样式，比如设置下拉框的背景色、边框、字体样式等。
CSS代码如下：

.navbar {
  list-style: none;
  background-color: #333;
  text-align: center;
  padding: 0;
  margin: 0;
}

.navbar li {
  font-size: 1.2em;
  line-height: 40px;
  position: relative;
  display: inline-block;
  text-align: left;
}

.navbar a {
  display: block;
  padding: 0 10px;
  color: #fff;
  font-size: 1em;
  line-height: 40px;
  text-decoration: none;
}

.navbar a:hover {
  background-color: #555;
}

.navbar ul {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #333;
  display: none;
  list-style: none;
}

.navbar li:hover > ul {
  display:inherit;
}

.dropdown li {
  line-height: 40px;
}

.dropdown a:hover {
  background-color: #555;
  color: #fff;
} 

如上述代码所示，我们设置了.navbar类的一些属性，如text-align、padding等，并对字体样式作了一些调整；还定义了.navbar类中li的样式、背景颜色等属性，以及对hover状态下li和a的背景颜色进行调整。在.dropdown类中，我们定义下拉框的位置、背景颜色和列表项li的样式。
最后，我们的导航栏就制作完成了，通过CSS的hover状态，我们可以实现鼠标移至导航栏选项上时，下拉框的展开与隐藏。