公司类网站喜欢用的纯CSS菜单

2024-09-05 12:20:21

字体：大中小

来源：转载

供稿：网友

公司类网站适合用的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="content-type" content="text/html; charset=utf-8"><title>Merix-纯CSS菜单-www.codefans.net</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{content:".";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(/jscss/demoimg/200908/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(/jscss/demoimg/200908/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(/jscss/demoimg/200908/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">公司主页</li>		<li class="">产品天地</li>		<li class="">新闻纵横</li>		<li class="">服务专区</li>		<li class="">联系我们</li>		<li class="">企业博客</li>	</ul></div></body></html>

上一篇：兼容火狐、IE的LI奇偶行颜色交替的方法

下一篇：自动变为大写的自适应CSS漂亮菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注