CSS可以帮助我们轻松创建横向二级菜单,让网站更加美观和实用。下面我们来看一下如何使用CSS来创建横向二级菜单。
/*一级菜单样式*/ ul{ list-style: none; margin:0; padding:0; } li{ float: left; position:relative; } a{ display:block; padding:0 20px; line-height:60px; text-decoration:none; color:#333; border-bottom:2px solid transparent; } a:hover{ border-bottom:2px solid #ccc; } /*二级菜单样式*/ ul ul{ display: none; position: absolute; top: 60px; left: 0; width: 100%; } ul ul li{ float: none; position: relative; } ul ul a{ line-height:30px; padding:0 30px; color:#666; background-color:#f5f5f5; } ul li:hover ul{ display: block; }
首先我们设置了一些基本的样式,包括消除了ul的默认样式,li浮动到左边,a标签的基本样式等等。接下来我们设置二级菜单的样式,给ul ul层设置了绝对定位,这样它就能相对于一级菜单移动。我们还设置了一些其他的样式,比如二级菜单li标签的position,a标签的背景颜色等等。最后,我们利用CSS的:hover选择器来设置当鼠标悬停在一级菜单上时,二级菜单的样式。
有了以上的CSS代码,我们只需要在HTML代码中添加相应的标签即可。例如:
<ul> <li><a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> </ul> </li> <li><a href="#">一级菜单2</a></li> <li><a href="#">一级菜单3</a></li> </ul>
这样,我们就可以轻松的实现横向二级菜单了!