css3二级菜单滑动 |图片旋转一周的css代码

/*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二级菜单滑动的效果。