公司類網站喜歡用的純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   class="vznfpvh"   id="t3">	<ul id="t3n" class="clearfix">		<li id="br3z791"    class="x">公司主頁</li>		<li id="jvz9zzj"    class="">產品天地</li>		<li id="rdvv3vf"    class="">新聞縱橫</li>		<li id="bvjxvnh"    class="">服務專區</li>		<li id="tjfjnlr"    class="">聯系我們</li>		<li id="x3fdnpd"    class="">企業博客</li>	</ul></div></body></html>

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

下一篇：自動變為大寫的自適應CSS漂亮菜單

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注