/* CSS代码 */ .menu { position: relative; width: 200px; height: 40px; background-color: #333; color: #fff; line-height: 40px; text-align: center; cursor: pointer; } .menu ul { position: absolute; top: 40px; left: 0; width: 200px; background-color: #333; display: none; } .menu:hover ul { display: block; } .menu li { height: 30px; line-height: 30px; border-bottom: 1px solid #666; text-align: center; } .menu li:last-child { border-bottom: none; }
以上是实现CSS3菜单滑动效果的CSS代码,大家将鼠标放到菜单上面,子菜单就会自动弹出,使网页设计更加美观。
需要注意的是,大家使用了:hover伪类来实现子菜单的弹出,当然也可以使用其他方法来实现这个效果。另外,大家需要给菜单设置一个position:relative属性,以便子菜单设置position:absolute时能够相对于菜单进行定位。
总之,CSS3菜单滑动效果是一种简单而实用的网页设计效果,大家可以根据自己的需要进行灵活的调整和扩展。