您的位置：首页 > 其它

渐变下拉导航

2016-03-07 13:37 375 查看 


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变下拉导航</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
color: #fff;
}
#nav,#nav ul{
list-style: none;
}
#nav{
font-family: "华文行楷";
font-size: 18px;
margin: 40px auto;
width: 762px;
height: 36px;
box-shadow: 0 0px 20px #0fc;
line-height: 34px;
background-image: -webkit-gradient(linear,0 50%,100% 50%,from(#0fc),to(rgb(255, 102, 238)));
border-radius: 50%;

}
#nav>li{
float: left;
margin: 0 auto;
position:relative;
height: 36px;
width: 106px;
display: block;
border-radius: 50%;

}
#nav > li:first-child{
margin-left:94px;
}
#nav ul{
position: absolute;
left: -9999px;
top: -9999px;
}
#nav ul li{
float: right;
border-radius: 50%;
line-height: 42px;
width: 44px;
height: 42px;
box-shadow: 8px 9px 2px 0px #0fc;
margin: 4px;
background-image: -webkit-gradient(linear,76% 76%,32% 100%,from(#0fc),to(rgb(255, 102, 238)));
}
#nav ul li a{
padding-left: 3px;
}
a{
text-decoration: none;
}
#nav li:hover ul{
left: 0px;
top:34px;
width:106px;
}

#nav ul li:hover{
-webkit-animation-name:zoomFontSize;
-webkit-animation-duration:1s;
-webkit-animation-direction:normal;
}
@-webkit-keyframes "zoomFontSize"{
0% {font-size: 100%;}
25% {font-size: 75%;}
50% {font-size: 50%;}
75% {font-size: 75%;}
100% {font-size: 100%;}
}
</style>
<body>
<ul id="nav">
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a>
<ul>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
</ul>
</li>

<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a>
<ul>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
</ul>
</li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a>
<ul>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
</ul>
</li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a>
<ul>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
</ul>
</li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a>
<ul>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
</ul>
</li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a>
<ul>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
<li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
</ul>
</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航