菜單欄示例一：
菜單源代碼
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#container .menu1 ul li").click(function() {
var index = $("#container .menu1 ul li").index(this);
$(this).addClass("bg").siblings().removeClass();
$("#container .menu2 ul li ul").eq(index).show().parent().siblings("li").children("ul").hide();
})
</script>
<style type="text/css">
body
{
margin: 0;
padding: 0;
font-family: "宋體";
font-size: 9pt;
color: #FFFFFF;
font-weight: bold;
}
#container
width: 100%; /* 1200px; */
height: auto;
margin: 0 auto;
/* border: 1px #1025c0 solid; */
/* xugang 2011.10.19 */
/* margin: 0; */
padding: 0px;
#container .menu1
width: 684px;
height: 34px;
border: none;
background: url(sadasd_09.png) no-repeat;
/*background: url(http://www.webdm.cn/images/20101213/2/menu1.gif) no-repeat;
background-color: #1B5582;*/
#container .menu1 ul
/* padding: 0; */
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 4px;
position: relative;
margin-left: 4px; /* xugang 一級菜 單選擇項樣式 */
#container .menu1 ul li
{ /*border: 1px #1025c0 solid; 測試 */
float: left;
height: 25px;
width: 110px;
line-height: 25px;
list-style: none;
text-align: center;
cursor: pointer;
/* color: #fffff; */
padding-left: 2px; /* xugang 一級菜單選擇項 */
/* margin-left: 1px; xugang 一級菜單選擇項 容易使一級菜單動态向右移動 */
#container .menu2
width: 100%; /* 1000px; */
color: #000000;
font-weight: normal;
background-color: #C9DEFA; /* #DFF0FF 子菜單顔色 */
padding-left: 0px; /* xugang */
padding-top: 0px; /* xugang */
margin-left: 0px; /* xugang */
#container .menu2 ul
margin: 0; /* xugang 原始 margin: 0; */
#container .menu2 ul li
height: 30px;
line-height: 30px;
#container .menu2 ul li ul li
{ /* border: 1px #1025c0 solid; 測試 */
padding-top: 0px;
padding-left: 40px;
padding-right: 30px; /* xugang */
.bg
font-size: 12pt;
/* font-weight: normal;*/
/* text-decoration: underline; blink */
background-color: #1B5582; /* #1B5582 一級菜單選擇項 背景 */
.hide
display: none;
.menu_a1{ display: block; color:#ffffff; text-decoration:none !important; }
.menu_a2{ display: block; color:#000000; text-decoration:none !important; }
</style>
</head>
<body>
<div id="container">
<div class="menu1">
<ul>
<li class="bg"><a href="#" class="menu_a1">第一欄</a></li>
<li><a href="#" class="menu_a1">第二欄</a></li>
<li><a href="#" class="menu_a1">第三欄</a></li>
<li><a href="#" class="menu_a1">第四欄</a></li>
<li><a href="#" class="menu_a1">第五欄</a></li>
<li><a href="#" class="menu_a1">第六欄</a></li>
</ul>
</div>
<div class="menu2">
<li>
<li><a href="#" class="menu_a2">第一欄</a></li>
</li>
<ul class="hide">
<li>第二欄</li><li>第二欄</li><li>第二欄</li>
<li>第三欄</li><li>第三欄</li><li>第三欄</li>
<li>第四欄</li><li>第四欄</li><li>第四欄</li>
<li>第五欄</li><li>第五欄</li><li>第五欄</li>
<li>第六欄</li><li>第六欄</li><li>第六欄</li>
<div style="width:400px; height:300px; background-color:red;"></div>
<br />
</body>
</html>
width: 100%; /* 1200px; */
/* xugang 2011.10.19 */
background: url(/images/cnblogs_com/xugang/sadasd_09.png) no-repeat;
margin-left: 4px; /* xugang 一級菜 單選擇項樣式 */
{ /*border: 1px #1025c0 solid; 測試 */
padding-left: 2px; /* xugang 一級菜單選擇項 */
/* margin-left: 1px; xugang 一級菜單選擇項 容易使一級菜單動态向右移動 */
width: 100%; /* 1000px; */
background-color: #C9DEFA; /* #DFF0FF 子菜單顔色 */
padding-left: 0px; /* xugang */
padding-top: 0px; /* xugang */
margin-left: 0px; /* xugang */
margin: 0; /* xugang 原始 margin: 0; */
{ /* border: 1px #1025c0 solid; 測試 */
/* text-decoration: underline; blink */
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運作]
菜單欄示例二：
<html>
<head profile="http://gmpg.org/xfn/11">
<title>黃頁地區清單</title>
body {background:#ccc;color:#000;font: normal normal normal 12px/180% Tahoma, Arial, Helvetica, sans-serif, "宋體";text-align:center;}
.nav {position: relative;background: url(nav_bg.png) no-repeat 0 -36px;width:960px;height:36px;}
.navinner {background: url(nav_bg.png) no-repeat 100% -72px;}
.navlist {height: 36px;line-height: 36px;overflow: hidden;margin: 0 10px;background: url(nav_bg.png) repeat-x 0 0;}
.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(nav_bg.png) no-repeat 0 -108px;}
.nav a {display: block;width: 102px;text-align: center;font-size: 120%; text-decoration:none;}
.nav a:link, .nav a:visited {color: #fff;text-decoration:none;}
.nav a:hover, .nav a:active {color: #fff;font-weight: bold;background: url(nav_bg.png) no-repeat 50% -144px;text-decoration:none;}
<div class="nav">
<div class="navinner">
<ul class="navlist">
<li><a href="http://www.qincai.net/" title="首頁">首頁</a></li>
<li><a href="http://www.qincai.net/cat.html" title="分類清單" rel="nofollow">分類清單</a></li>
<li><a href="http://www.qincai.net/loc.html" title="地區清單" rel="nofollow">地區清單</a></li>
<li><a href="http://www.qincai.net/trade.html" title="供求商機" rel="nofollow">供求商機</a></li>
<li><a href="http://www.qincai.net/news.html" title="行業新聞" rel="nofollow">行業新聞</a></li>
<li><a href="http://www.qincai.net/submit.html" title="送出企業" rel="nofollow">送出企業</a></li>
<li><a href="http://fz.qincai.net/join.html" title="釋出商機" rel="nofollow">釋出商機</a></li>
<li><a href="http://www.qincai.net/find.html" title="進階搜尋" rel="nofollow">進階搜尋</a></li>
.nav {position: relative;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -36px;width:960px;height:36px;}
.navinner {background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 100% -72px;}
.navlist {height: 36px;line-height: 36px;overflow: hidden;margin: 0 10px;background: url(/images/cnblogs_com/xugang/nav_bg.png) repeat-x 0 0;}
.nav li {float: left;display: inline;margin: 0 0 0 -2px;padding: 0 4px 0 6px;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 0 -108px;}
.nav a:hover, .nav a:active {color: #fff;font-weight: bold;background: url(/images/cnblogs_com/xugang/nav_bg.png) no-repeat 50% -144px;text-decoration:none;}
<a href="http://files.cnblogs.com/xugang/%E6%A8%AA%E5%90%91%E8%8F%9C%E5%8D%95%E6%A0%8FDemo.rar">Demo下載下傳</a>
本文轉自鋼鋼部落格園部落格，原文連結：http://www.cnblogs.com/xugang/archive/2011/11/15/2250355.html，如需轉載請自行聯系原作者