HTML和CSS都是网页开发中不可或缺的重要工具。二级菜单是一种非常常见的网页设计元素,可以优化用户体验。在本篇文章中,我们将介绍如何使用CSS和HTML创建一个漂亮的二级菜单。 首先,我们需要在HT
<ul id="menu"> <li>菜单项1 <ul> <li>二级菜单1</li> <li>二级菜单2</li> <li>二级菜单3</li> </ul> </li> <li>菜单项2 <ul> <li>二级菜单4</li> <li>二级菜单5</li> <li>二级菜单6</li> </ul> </li> </ul>
/*菜单列表*/ #menu { list-style:none; margin:0; padding:0; } /*菜单项*/ #menu li { float:left; /*水平排列*/ position:relative; /*相对定位*/ cursor:pointer; } /*二级菜单*/ #menu ul { position:absolute; /*绝对定位*/ top:30px; /*距离菜单项顶部30px*/ left:0; background:#f2f2f2; border:none; margin:0; padding:0; display:none; /*默认隐藏*/ } /*鼠标移过菜单项*/ #menu li:hover ul { display:block; }
粉丝
0
关注
0
收藏
0