标签：
今天在浏览网站的时候发现，二级导航除了过去清一色的ul外，还出现了一个 大块div来让二级导航撑下更多的信息，特此记录一下
首先搭建结构
<nav> <ul> <li class="menu">test <div class="drop"> <ul> <li>测试1</li> <li>测试2</li> <li>测试3</li> <li>测试4</li> </ul> </div> </li> <li class="menu">test <div class="drop"> <ul> <li>测试1</li> <li>测试2</li> <li>测试3</li> <li>测试4</li> </ul> </div> </li> <li class="menu">test <div class="drop pro"></div> </li> <li class="menu">test <div class="drop"> <ul> <li>测试1</li> <li>测试2</li> <li>测试3</li> <li>测试4</li> </ul> </div> </li> </ul> </nav>
结构非常简单，如下图
然后添加样式实现效果
nav{
position:relative;
height:40px;
width:500px;
margin: 0 auto;
padding:0;
text-align:center;
}
ul{
margin:0;
padding: 0;
list-style:none;
}
nav li.menu{
display:inline-block;
float:left;
width:100px;
height:40px;
line-height:40px;
background: rgba(5, 112, 144, 0.55);;
border-right:1px solid #fff;
box-sizing: border-box;
}
.drop{
position:absolute;
top:40px;
padding: 10px;
display: block;
/*border:1px solid #eee;*/
background: rgba(94, 251, 89, 0.75);
display: none;
}
li.menu:hover{
background:rgba(94, 251, 89, 0.75);
}
li.menu:hover .drop{
display:block;
}
.pro{
height:500px;
width:300px;
background: #fea;
}
.drop ul li{
font-size:16px;
height:30px;
line-height:30px;
width:80px;
}
效果图
多内容模式
欢迎留言交流，更多有趣的css玩法
标签：
原文地址：http://www.cnblogs.com/V-JACK/p/4802206.html
