你一定喜歡的CSS中英文雙語菜單代碼

2024-09-05 12:20:51

字體：大中小

來源：轉載

供稿：網友

一款你一定喜歡的CSS中英文雙語菜單，支持鼠標特效，先運行一下看效果，絕對會另你滿意。用到了一個背景圖片，請自行下載。

<!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>實用的中英文CSS菜單</title><style>body{margin:0;padding:0;font-size:12px;}*{margin:0;padding:0;text-align:left;color:#9196A0;font-family:Verdana;}a{color:#9196A0;}a:link {	text-decoration: none}a:visited{	text-decoration: none}a:hover{	text-decoration:underline;	color:#81BC06}#nav{height:100%;overflow: hidden;list-style:none;margin:0 auto;width:798px}#nav li{float:left;font-weight:bold;height:60px;background:url(/jscss/demoimg/200905/navbg.png) #fff repeat-x left bottom;padding:0}#nav a{text-align:center;padding-top:20px;display: block;height:40px;line-height:40px;}#nav li a.one{width:80px;}#nav li a.two{width:80px;}#nav li a.three{width:80px;}#nav li a.four{width:80px;}#nav li a.five{width:100px;}#nav li a.six{width:106px;}#nav li a.seven{width:100px;}#nav li a.eight{width:80px;}#nav li a.nine{width:92px;}#nav li a:hover.one{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px 0}#nav li a:hover.two{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -60px}#nav li a:hover.three{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -120px}#nav li a:hover.four{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -180px}#nav li a:hover.five{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 4px -240px}#nav li a:hover.six{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 8px -300px}#nav li a:hover.seven{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 4px -360px}#nav li a:hover.eight{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat -8px -420px}#nav li a:hover.nine{background:url(/jscss/demoimg/200905/navunbg.gif) no-repeat 0 -480px}</style></head><body><p> </p><ul id="nav"> <li>網站首頁</li> <li>關于我們</li> <li>最新更新</li> <li>更新排行</li> <li>建站服務流程</li> <li>源碼愛好者</li> <li>網站使用指南</li> <li>網頁特效</li> <li>聯系我們</li></ul>

上一篇：實用的二級導航，自定義方便

下一篇：CSS圖標菜單,帶有小圖片的LI列表菜單

學習交流

如何查找有故障的配件

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

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注