css3二级菜单滑动

CSS3二级菜单滑动是一种常用的网页设计技巧，能够为网页增添一点动态效果，提高用户使用体验。下面我们将介绍如何使用CSS3实现这一效果。

/*CSS样式*/#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#menu ul li {
    display:inline-block;
    background-color: #eee;
}
#menu ul li:hover {
    background-color: #ccc;
}
#menu ul ul {
    display: none;
    position: absolute;
     top:0;
     left:100%;
 }
    #menu ul li:hover >
ul {
    display:inherit;
}
    

首先，我们需要HTML结构，一般情况下使用无序列表来创建菜单。

div id="menu">
    ul>
    li>
    a href="#">
    菜单1/a>
    /li>
    li>
    a href="#">
    菜单2/a>
    ul>
    li>
    a href="#">
    子菜单1/a>
    /li>
    li>
    a href="#">
    子菜单2/a>
    /li>
    li>
    a href="#">
    子菜单3/a>
    /li>
    /ul>
    /li>
    li>
    a href="#">
    菜单3/a>
    ul>
    li>
    a href="#">
    子菜单1/a>
    /li>
    li>
    a href="#">
    子菜单2/a>
    /li>
    /ul>
    /li>
    li>
    a href="#">
    菜单4/a>
    /li>
    /ul>
    /div>
    

接着，我们需要设置CSS样式。#menu ul设置列表样式的无序列表，#menu ul li将li元素展示为内联块级元素，#menu ul li:hover鼠标悬停的效果设置为改变背景颜色。#menu ul ul设置为子菜单，display:none表示子菜单初始状态为隐藏，position:absolute表示子菜单的位置与父菜单相对显示到父菜单的右侧。

最后，使用选择器#menu ul li:hover > ul，当鼠标悬停在li元素上时，子菜单展示出来。至此，就完成了CSS3二级菜单滑动的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！