作者：ConstruWoodPan | 来源：互联网 | 2023-05-17 22:19
在上篇 css3 手风琴效果中得到灵感，通过简单css实现二级导航效果
首先页面结构还是通过无需列表嵌套来实现
<nav>
<ul class='clearfix'>
<li class="menu">item1
<ul class='subMenu'>
<li>subItem1li>
<li>subItem2li>
<li>subItem3li>
ul>
li>
<li class="menu">item2
<ul class='subMenu'>
<li>subItem1li>
<li>subItem2li>
<li>subItem3li>
<li>subItem3li>
<li>subItem3li>
<li>subItem3li>
<li>subItem3li>
ul>
li>
<li class="menu">item3
<ul class='subMenu'>
<li>subItem1li>
<li>subItem2li>
<li>subItem3li>
<li>subItem3li>
<li>subItem3li>
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，但没能成功应用动画效果是一种遗憾，希望能得到高人指点
京公网安备 11010802041100号