在上篇 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,但没能成功应用动画效果是一种遗憾,希望能得到高人指点
时间: 2024-08-25 13:59:30