自寫的滑動門式菜單

2024-09-05 12:20:28

字體：大中小

來源：轉載

供稿：網友

自已寫的橫排的導航菜單，紅色水晶風格，大家可以用啦，不過也有些地方需要高手指教啊，代碼里有注釋，兼容性還不錯，希望一起提高吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>自寫的滑動門式菜單</title><style type="text/css">*{margin:0;padding:0;}body{ margin:auto;font:14px "宋體",Verdana, Arial, Helvetica, sans-serif;color:#333;}ul,li{padding:0; list-style:none;}a:link,a:visited{color:#333;text-decoration:none;}a:hover{color:#d00;text-decoration:none;}#headNav{background:url(/jscss/demoimg/200910/_navBg.png) 0 -42px repeat-x; border-top:solid 1px #E5B0B1; height:42px;}#headNav ul li{float:left; padding:13px 0; text-align:center; cursor:pointer; }#headNav ul li a{display:block; font-size:14px; padding:0 9px; font-weight:bold; color:#fff;}#headNav ul li a.lineLink{border-left:dotted 1px #fff;}.navNormalLink{background:url(/jscss/demoimg/200910/_navBg.png) 0 -42px no-repeat; padding-bottom:4px;}.navNormalOver{background:url(/jscss/demoimg/200910/_navBg.png) no-repeat; padding-bottom:4px;}</style></head><body>	<div   class="iwvjtn8m0"   id="headNav">		<ul>			<li>站長首頁</li>			<li>行業資訊</li>			<li>搜索引擎</li>			<li>站長訪談</li>			<li>網站聯盟</li>			<li>源碼下載</li>			<li>網頁特效</li>			<li>模板素材</li>			<li>軟件下載</li>		</ul>		<script type="text/javascript">				</script>	</div></body></html>

上一篇：CSS仿支付寶菜單，自己親手寫的

下一篇：CSS實現折疊的菜單