如何制作纯CSS下拉列表(网站导航)

<ul class="dropdown">
  <li><a href="#">主页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">产品</a>
    <ul>
      <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>

/* 基本样式 */
.dropdown, .dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown li {
  display: inline-block;
  position: relative;
}

.dropdown a {
  display: block;
  padding: 0 10px;
  line-height: 30px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
}

.dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 999;
}

.dropdown ul li {
  display: block;
}

/* 鼠标悬停时显示下拉列表 */
.dropdown li:hover > ul {
  display: block;
}