[分享]css3展开收缩菜单

CSS3展开收缩菜单是一种常见的网页效果，通过CSS3的伪类选择器和属性动画，可以轻松实现一个简单、美观的展开收缩菜单。HTML代码如下： 菜单1 菜单2 菜单3 子菜单1 子菜单2 CSS...

CSS3展开收缩菜单是一种常见的网页效果，通过CSS3的伪类选择器和属性动画，可以轻松实现一个简单、美观的展开收缩菜单。

HTML代码如下：
<ul class="menu">
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3
    <ul>
      <li>子菜单1</li>
      <li>子菜单2</li>
    </ul>
  </li>
</ul>

CSS代码如下：
.menu ul {
  display: none;
}
.menu li:hover > ul {
  display: block;
}
.menu li {
  position: relative;
}
.menu ul {
  position: absolute;
  left: 100%;
  top: 0;
}

以上代码包含了HTML和CSS两部分，HTML部分是一个带有子菜单的无序列表，CSS部分定义了子菜单的初始状态和展开收缩的效果。

其中，.menu ul的display:none属性隐藏了子菜单，.menu li:hover > ul的display:block属性在鼠标悬停时展开子菜单，.menu li的position:relative属性使子菜单相对于父菜单进行定位，.menu ul的position:absolute、left:100%和top:0分别将子菜单定位到父菜单的右侧上方。

通过以上代码和一些微调，就可以实现一个简单、美观的CSS3展开收缩菜单。