关于二级菜单的两种写法
要实现二级菜单我们要设置三个div,第一个div是最大的一个,另外两个div放在最大的div里面。然后设置外面div的大小,这里要注意里面的两个div的大小不能超过最大的div。
然后给两个小的div设置属性,然后将二级菜单进行隐藏。这里要注意的是,给二级菜单进行绝对定位要给它的父级设置相对定位。也就是父相子绝。然后我们将二级菜单隐藏,再设置鼠标的hover属性。要显示二级菜单我们应该把hover属性设置在它的父级上面。如果不设置在父级上面,那么二级菜单就显示不出来。
<div class="warpper">
<div class="nav_first">
一级菜单
</div>
<div class="nav_second">
二级菜单
</div>
</div>
<style>
.online{
width: 300px;
height: 50px;
position: relative;
margin: 200px auto;
}
.caidan{
width: 150px;
height: 50px;
background-color: red;
font-size: 20px;
}
.erji{
width: 150px;
height: 50px;
background-color: blue;
display: none;
font-size: 18px;
position: absolute;
left: 0px;
top: -50px;
}
.online:hover .erji{
display: block;
}
</style>
我们也可以用ul来设置二级菜单
方法同上面一样,只是这里要注意的是,用ul来嵌套的时候,二级菜单必须要写在第一个ul的li标签里面,否则它们将会在同一列显示,且没有hover效果
代码如下:
<ul class="caidan">
<li>一级菜单
<ul class="erji">
<li><a href="">二级菜单</a></li>
</ul>
</li>
</ul>
<style type="text/css">
.caidan
{
width: 300px;
height: 50px;
margin: 200px auto;
}
a{
color: #000;
text-decoration: none;
font-size: 40px;
}
ul.caidan li
{
float: left;
list-style: none;
width: 200px;
background-color: red;
font-size: 40px;
}
ul.caidan li ul.erji
{
display: none;
}
ul.caidan li:hover ul.erji
{
display: block;
}
ul.caidan li:hover ul.erji li:hover
{
background-color: green;
}
</style>