划水摸鱼的时候研究了下CSS实现悬浮式菜单,在此分享一下!
效果图:
效果图HTML:
<div class="header">
<div class="nav">
<ul>
<li><a href="">菜单A</a></li>
<li><a href="">菜单B</a></li>
<li><a href="">菜单C</a></li>
<li>
<a href="" class="showSubmenu">菜单D</a>
<ul class="submenu">
<li><a href="">子菜单A</a></li>
<li><a href="">子菜单B</a></li>
<li><a href="">子菜单C</a></li>
<li><a href="">子菜单D</a></li>
</ul>
</li>
<li>
<a href="" class="showSubmenu">菜单E</a>
<ul class="submenu">
<li><a href="">子菜单A</a></li>
<li><a href="">子菜单B</a></li>
<li><a href="">子菜单C</a></li>
<li><a href="">子菜单D</a></li>
<li><a href="">子菜单E</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
body{
margin: 0;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.header{
width: 100%;
background-color: #076fd9;
}
.nav{
width: 1200px;
margin: 0 auto;
height: 50px;
}
.nav ul li{
float: left;
line-height: 50px;
height: 50px;
width: 120px;
}
.nav ul li:hover{
background-color: #0959A7;
}
.nav ul li a{
display: block;
color: #fff;
font-size: 14px;
text-align: center;
}
.nav ul li .submenu li{
width: 120px;
line-height: 50px;
height: 50px;
background-color: #076fd9;
}
.nav ul li .submenu li:hover{
background-color: #0959A7;
}
.nav ul li .submenu{
display: none;
}
.nav ul li:hover .submenu{
display: block;
}
.showSubmenu{
pointer-events: none;
cursor: default;
}
关于transition:
transition是一个复合属性,有四个属性transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s),必需值且不能为0
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
/***** 本例中的hover过渡 *****/
.nav ul li:hover{
background-color: #0959A7;
transition: background-color 0.5s ease 0s; //W3C 标准
-moz-transition: background-color 0.5s ease 0s; //Mozilla内核
-webkit-transition: background-color 0.5s ease 0s; //Webkit内核
-o-transition: background-color 0.5s ease 0s; //Opera内核
}
另外,transition与display的冲突此处暂不做讨论!
网友评论