html5+css制作下拉菜单

好的，下面是一个简单的示例：

HTML 代码：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li class="dropdown">
      <a href="#">产品</a>
      <ul class="dropdown-menu">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

CSS 代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  position: relative;
}

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

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  background-color: #fff;
  border: 1px solid #ccc;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

解释：

- `nav ul` 和 `nav li` 用来设置导航条的样式。
- `nav li a` 用来设置导航链接的样式。
- `dropdown` 类用来标记下拉菜单的父元素。
- `dropdown-menu` 类用来设置下拉菜单的样式，设置为绝对定位，隐藏起来。
- `dropdown:hover .dropdown-menu` 用来设置鼠标悬停在下拉菜单的父元素时，显示下拉菜单。
- `dropdown-menu li` 和 `dropdown-menu li a` 用来设置下拉菜单中的链接的样式。
- `dropdown-menu li:hover` 用来设置鼠标悬停在下拉菜单中的链接时的样式。