CSS中的二级菜单是一个非常常见的网页设计元素,它可以让页面显得更加美观与规整。在制作二级菜单时,需要使用CSS进行布局和样式的设置。下面我们来详细了解一下制作二级菜单的方法。首先,在HTML文件中添
<ul class="menu"> <li>菜单项1</li> <li>菜单项2 <ul> <li>二级菜单项1</li> <li>二级菜单项2</li> <li>二级菜单项3</li> </ul> </li> <li>菜单项3</li> </ul>
.menu { list-style: none; background-color: #f1f1f1; padding: 0; margin: 0; } .menu li { display: inline-block; position: relative; padding: 10px; } .menu li:hover { background-color: #555; color: #fff; } .menu ul { position: absolute; top: 40px; left: 0; z-index: 1; display: none; } .menu ul li { display: block; width: 200px; padding: 10px; } .menu li:hover > ul { display: inherit; }
粉丝
0
关注
0
收藏
0