公司类网站喜欢用的纯CSS菜单_菜单导航特效

公司类网站适合用的CSS菜单，简洁大气，兼容性好，响应鼠标动作，滑出显示标记，非常不错，希望喜欢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="sIFR-hasFlash" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="mrc-type" mrc="text/html; charset=utf-8">
<title>Merix-纯CSS菜单-www.mb5u.com</title>
<style>
*{margin:0;padding:0;}
html{height:100%;margin-bottom:1px;background:#48494d;}
body{margin:0;padding:0 0 10px;background:#48494d;font-size:62.5%;}
body,td,input,textarea,select{color:#666;font-family:Arial,Tahoma,sans-serif;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;height:0;margin:0;}
.clearfix:after{mrc:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
a{color:#666;text-decoration:none;outline:none;}
a:active{outline:none;}
a:hover,a:active,a:focus{color:#333;}
#t3{background:url(http://p1.mb5u.com/texiao/1/m_bg_nav.gif) #fff 0 100% repeat-x;border-top:0.1em solid #dedede;}
#t3a{width:750px;margin:0 auto;}
#t3n{width:750px;margin:0 50px;padding:0;list-style:none;}
#t3n li{display:block;padding:0 0 3px;background:url(http://p1.mb5u.com/texiao/1/m_e_menu.gif) 50% -1000% no-repeat;position:relative;float:left;}
#t3n li.x a{border-left:none;}
#t3n li.home{border-left:none;float:right;background:transparent !important;}
#t3n li:hover,#t3n li.over{background-position:50% 100%;}
#t3n li a{float:left;display:block;padding:0.9em 10px 0.73em;border-left:0.1em solid #dedede;border-bottom:0.27em solid #fff;font-size:1.1em;color:#70540f;font-weight:700;}
#t3n li:hover a,#t3n li.over a,#t3n li a:hover,#t3n li a:focus,#t3n li a:active{color:#000;border-bottom:0.27em solid #ff378c;}
#t3n li.home{padding:0;}
#t3n li.home a{border-left:none;padding:0.9em 10px 0.73em 0;color:#333;}
#t3n li.home a:hover{padding:0.9em 10px 0.73em 0;color:#000;border-color:#fff !important;}
#t3n li a span{position:absolute;left:47%;top:3.2em;visibility:hidden;width:5px;height:3px;background:url(http://p1.mb5u.com/texiao/1/m_e_menu.gif) no-repeat;}
#t3n li a:hover span,#t3n li a:focus span,#t3n li a:active span{visibility:visible;}
</style>
</head>
<body>
<div id="t3">
	<ul id="t3n" class="clearfix">
		<li class="x"><a href="/">公司主页</a></li>
		<li class=""><a href="#">产品天地</a></li>
		<li class=""><a href="#">新闻纵横</a></li>
		<li class=""><a href="#">服务专区</a></li>
		<li class=""><a href="#">联系我们</a></li>
		<li class=""><a href="#">企业博客</a></li>
	</ul>
</div>
</body>
</html>

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

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

公司类网站喜欢用的纯CSS菜单_菜单导航特效

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

菜单导航特效推荐

猜你也喜欢看这些