淘先锋技术网

首页 1 2 3 4 5 6 7

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>

这样,我们就可以轻松的实现横向二级菜单了!