[分享]css制作横向下拉导航菜单栏

横向下拉导航菜单栏是网页设计中常用的一种导航方式，它可以有效地节约页面空间，让页面更加美观。下面我们来学习如何使用 CSS 制作横向下拉导航菜单栏。 首页 产品 产品1 产品2 产品3 关于我们...

横向下拉导航菜单栏是网页设计中常用的一种导航方式，它可以有效地节约页面空间，让页面更加美观。下面我们来学习如何使用 CSS 制作横向下拉导航菜单栏。

<ul class="nav">
  <li>首页</li>
  <li>产品
    <ul class="dropdown">
      <li>产品1</li>
      <li>产品2</li>
      <li>产品3</li>
    </ul>
  </li>
  <li>关于我们</li>
  <li>联系我们</li>
</ul> 

以上是 HTML 结构部分，我们首先创建一个无序列表，添加一些列表项。其中 “产品” 这个列表项下面有一个下拉列表，用于显示更多的产品选项。

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

.nav li {
  float: left;
  position: relative;
}

.nav li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

.nav li:hover {
  background-color: #111;
}

.dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 1;
  display: none;
}

.dropdown li {
  float: none;
}

.nav li:hover .dropdown {
  display: block;
} 

CSS 部分负责对 HTML 结构进行样式设置。其中，“.nav” 是指整个导航菜单栏的样式，包括背景色、外边距和内边距等；“.nav li” 是指每个列表项的样式，使用浮动使它们排列在一行；“.dropdown” 是指下拉列表的样式，使用绝对定位将它放在菜单栏下面，且默认不显示；“.nav li:hover .dropdown” 是指鼠标滑过列表项时下拉列表的样式，显示下拉列表。

通过以上 HTML 结构和 CSS 样式设置，我们就可以创建一个简单的横向下拉导航菜单栏了。可以根据自己的需求进行调整，让导航菜单栏更加适合自己的网站。