本文主要講解CSS如何製作中英文雙語菜單，這是一款你一定喜歡的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(images/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(images/navunbg.gif) no-repeat -8px 0}#nav li a:hover.two{background:url(images/navunbg.gif) no-repeat -8px -60px}#nav li a:hover.three{background:url(images/navunbg.gif) no-repeat -8px -120px}#nav li a:hover.four{background:url(images/navunbg.gif) no-repeat -8px -180px}#nav li a:hover.five{background:url(images/navunbg.gif) no-repeat 4px -240px}#nav li a:hover.six{background:url(images/navunbg.gif) no-repeat 8px -300px}#nav li a:hover.seven{background:url(images/navunbg.gif) no-repeat 4px -360px}#nav li a:hover.eight{background:url(images/navunbg.gif) no-repeat -8px -420px}#nav li a:hover.nine{background:url(images/navunbg.gif) no-repeat 0 -480px}</style></head><body><p> </p><ul id="nav"><li><a href="#" class="one">網站首頁</a></li><li><a href="#" class="two">關於我們</a></li><li><a href="#" class="three">最新更新</a></li><li><a href="#" class="four">更新排行</a></li><li><a href="#" class="five">建站服務流程</a></li><li><a href="#" class="six">客戶案例</a></li><li><a href="#" class="seven">網站使用指南</a></li><li><a href="#" class="eight">網頁特效</a></li><li><a href="#" class="nine">聯絡我們</a></li></ul><!--nav end-->
相關推薦：
用純CSS實現篩選菜單功能
用css3實現動畫下拉式功能表效果的實現步驟
PHP菜單的自訂方法詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
