css下拉二级菜单

CSS下拉二级菜单是Web开发中常见的交互式菜单形式，让用户可以方便地浏览网站的各个页面和功能。

HTML结构：

<ul class="navigation">
  <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>

CSS样式：

.navigation {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.navigation li > a {
  display: block;
  padding: 10px 20px;
}

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

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

.dropdown-menu li {
  display: block;
}

.dropdown-menu li > a {
  padding: 10px 20px;
} 

通过HTML中的ul和li标签来定义菜单的结构，其中嵌套了二级菜单的ul和li标签。通过CSS的绝对定位来控制二级菜单的显示位置，并通过:hover选择器和display属性来控制二级菜单的显示隐藏。

使用CSS下拉二级菜单可以使网站的菜单更加美观、交互性更强、更加方便用户浏览和操作。