如何制作 CSS 下拉菜单

在网页设计中，CSS下拉菜单是一种常见且实用的导航元素，它能够在有限的空间内展示丰富的内容。下面将为你介绍制作CSS下拉菜单的基本步骤。

我们需要创建基本的HTML结构。在HTML文件中，使用无序列表（ul）和列表项（li）来构建菜单的框架。例如：

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a>
    <ul class="submenu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
    </ul>
  </li>
  <li><a href="#">联系我们</a></li>
</ul>

这里，我们创建了一个包含三个主菜单项的菜单，其中“产品”项有一个下拉子菜单。

接下来，为菜单添加基本的CSS样式。设置菜单的布局、字体、颜色等。例如：

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

.menu li {
  display: inline-block;
}

.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

这将使菜单水平排列，并设置了一些基本的样式。

然后，处理下拉菜单的显示和隐藏。默认情况下，子菜单应该是隐藏的，当鼠标悬停在父菜单项上时显示。使用CSS的 display 属性和 :hover 伪类来实现：

.submenu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menu li:hover.submenu {
  display: block;
}

最后，为下拉菜单中的链接添加样式：

.submenu li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.submenu li a:hover {
  background-color: #f1f1f1;
}

通过以上步骤，一个简单的CSS下拉菜单就制作完成了。你可以根据自己的需求进一步调整和美化菜单的样式，使其更好地融入你的网页设计中。