[分享]css下拉菜单的程序

在网页制作中，下拉菜单是一个常用的元素，最常见的方式就是使用CSS实现下拉菜单。下面我们来看一下如何用CSS实现一个简单的下拉菜单：/CSS样式/ ul { margin: 0; padding: 0...

在网页制作中，下拉菜单是一个常用的元素，最常见的方式就是使用CSS实现下拉菜单。下面我们来看一下如何用CSS实现一个简单的下拉菜单：

/*CSS样式*/
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  float: left;
  width: 100px;
  position: relative;
  /*使下拉菜单显示*/
}
li ul {
  display: none;
  position: absolute;
  /*将下拉菜单置于li下面*/
  top: 20px;
  left: 0;
}
li:hover ul {
  display: block;
  /*鼠标悬浮在li上时，显示下拉菜单*/
}
/*为下拉菜单中的选项添加样式*/
li ul li {
  clear: both;
  width: 100%;
}

上面的代码中使用了伪类:hover来控制鼠标悬浮时下拉菜单的显示，在li:hover ul的样式中，将下拉菜单的display属性设置为block，这样点击菜单时就会显示下拉菜单。

下面是HTML代码：

<ul>
  <li><a href="#">菜单1</a>
    <ul>
      <li><a href="#">子菜单1-1</a></li>
      <li><a href="#">子菜单1-2</a></li>
      <li><a href="#">子菜单1-3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
</ul>

在ul中包含了多个li，每个li中又有一个a标签和一个ul标签，ul标签中包含了菜单的下拉选项。通过添加更多的li和ul标签，我们可以轻松地扩展这个下拉菜单的选项。