在上篇 css3 手风琴效果中得到灵感，通过简单css实现二级导航效果
首先页面结构还是通过无需列表嵌套来实现
<nav> <ul class=‘clearfix‘> <li class="menu">item1 <ul class=‘subMenu‘> <li>subItem1</li> <li>subItem2</li> <li>subItem3</li> </ul> </li> <li class="menu">item2 <ul class=‘subMenu‘> <li>subItem1</li> <li>subItem2</li> <li>subItem3</li> <li>subItem3</li> <li>subItem3</li> <li>subItem3</li> <li>subItem3</li> </ul> </li> <li class="menu">item3 <ul class=‘subMenu‘> <li>subItem1</li> <li>subItem2</li> <li>subItem3</li> <li>subItem3</li> <li>subItem3</li> </ul> </li> </ul> </nav>
添加样式实现导航效果
.clearfix:after{content:‘‘;clear:both; overflow:auto;}
/* nav */
nav{
border:1px solid #eee;
width:300px;
height: 40px;
margin:0 auto;
text-align:center;
}
nav ul{
list-style:none;
margin:0;
padding: 0;
}
nav ul>li{
display:block;
float:left;
width:100px;
height:40px;
line-height:40px;
background: #f80;
overflow:hidden;
}
li.menu:hover{
background: #f00;
height:auto;
}
最终效果图
PS:
li.menu:hover中为了使二级导航可以全部显示，没法将height设成固定值来应用动画过度效果，而是直接把height:设成auto，但没能成功应用动画效果是一种遗憾，希望能得到高人指点
原文：http://www.cnblogs.com/V-JACK/p/4799410.html