css展开下拉菜单怎么设置

CSS是前端开发中不可或缺的一部分，其中展开下拉菜单是很常见的组件。下面我们来介绍一下如何设置CSS展开下拉菜单。

HTML代码:
<div class="menu">
  <a href="#">菜单1</a>
  <a href="#">菜单2</a>
  <a href="#">菜单3</a>
  <a href="#">菜单4</a>
  <ul class="dropdown">
    <li><a href="#">下拉菜单1</a></li>
    <li><a href="#">下拉菜单2</a></li>
    <li><a href="#">下拉菜单3</a></li>
  </ul>
</div>

CSS代码:
.menu {
  display: inline-block;
  position: relative;
}
.menu a {
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #ddd;
  color: #333;
  text-@R_502_3267@: none;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background-color: #fff;
  border: 1px solid #ddd;
  Box-shadow: 0 2px 4px rgba(0,0.2);
}
.dropdown li {
  display: block;
}
.dropdown li a {
  display: block;
  padding: 10px;
  color: #333;
  text-@R_502_3267@: none;
}
.menu:hover .dropdown {
  display: block;
}

通过上面的代码，我们实现了一个简单的CSS展开下拉菜单。在HTML代码中，我们先创建一个包含菜单和下拉菜单的div，菜单使用普通的a标签，而下拉菜单使用ul和li标签结合。在CSS代码中，我们通过给菜单设置position为relative，下拉菜单设置position为absolute，并设置top为100%实现下拉菜单位置的确定。通过设置menu:hover，我们可以让鼠标悬停在菜单上时下拉菜单显示。