鼠标滑过变色的菜单条_菜单导航特效

织梦DedeCMS视频教程买空间租服务器选网硕互联！ 无忧站长工具,百度权重一键全查!

鼠标滑过变色的CSS菜单条，用了不少图片，不过兼容性挺好，相信代码大多数都能看懂，共享给大家，希看喜欢哦。

<html>
<head>
<title>鼠标滑过变色的菜单条</title>
<style type="text/css">
#pro13 ul {margin:0 auto; padding:10px; list-style:none; white-space:nowrap; list-style:none; height:35px; position:relative; background:#aa6; font-size:11px;}
#pro13 li {margin:0; padding:0; float:left;}
#pro13 li a {display:block; float:left; height:35px; line-height:35px; color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 15px; cursor:pointer; background:url(http://p1.mb5u.com/texiao/pro_13_0a.gif) no-repeat;}
#pro13 li a b {float:left; display:block; padding:0 30px 0 15px; background:url(http://p1.mb5u.com/texiao/pro_13_0b.gif) no-repeat right top;}
#pro13 li.current a {color:#cc0; background:url(http://p1.mb5u.com/texiao/pro_13_2a.gif) no-repeat; line-height:33px;}
#pro13 li.current a b {background:url(http://p1.mb5u.com/texiao/pro_13_2b.gif) no-repeat right top; padding-bottom:2px;}
#pro13 li a:hover {color:#ff0; background: url(http://p1.mb5u.com/texiao/pro_13_1a.gif) no-repeat; line-height:35px;}
#pro13 li a:hover b {background:url(http://p1.mb5u.com/texiao/pro_13_1b.gif) no-repeat right top;}
#pro13 li.current a:hover {color:#cc0; background: url(http://p1.mb5u.com/texiao/pro_13_2a.gif) no-repeat; cursor:default; line-height:33px;}
#pro13 li.current a:hover b {background:url(http://p1.mb5u.com/texiao/pro_13_2b.gif) no-repeat right top; padding-bottom:2px;}
</style>
</head>
<body>
<div id="pro13">
<ul>
<li><a href="#"><b>Index</b></a></li>
<li><a href="#"><b>Service</b></a></li>
<li><a href="#"><b>Products</b></a></li>
<li><a href="#"><b>Welcome</b></a></li>
<li><a href="#"><b>Search</b></a></li>
</ul>
</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2011-02-24

[收藏][报错][返回列表]

评论加载中....

鼠标滑过变色的菜单条_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

收藏&分享