第一步、編寫橫向菜單的HTML代碼架構
請將以下代碼添加到HTML文檔的導航欄區域中。
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
<li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>
第二步、編寫CSS代碼
1、設置公共樣式
請將以下CSS代碼添加到HTML文檔的<head>...</head>標簽范圍中。
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 設置文字大小和字體樣式 */
}
#menu, #menu li {
list-style:none; /* 將默認的列表符號去掉 */
padding:0; /* 將默認的內邊距去掉 */
margin:0; /* 將默認的外邊距去掉 */
}
</style>
大家都知道，<ul>中的各條目<li>默認都是縱向排列的，我們需要定義CSS來讓其橫向排列起來。
Tips：因為我們現在將導航欄拉出來獨立講解，所以需要設置一些公共樣式，如果您在 body 或其他地方已經重設了默認效果，以上代碼可以去掉
2、讓文字橫排
大家都知道，<ul>標簽下的項目<li>默認是縱向排列的，我們需要定義額外的CSS屬性讓其橫向排列。
<style type="text/css">
#menu li {
float:left; /* 往左浮動 */
}
</style>
3、設置鏈接樣式：
<style type="text/css">
#menu li a {
display:block; /* 將鏈接設為塊級元素 */
padding:8px 50px; /* 設置內邊距 */
background:#3A4953; /* 設置背景色 */
color:#fff; /* 設置文字顏色 */
text-decoration:none; /* 去掉下划線 */
border-right:1px solid #000; /* 在左側加上分隔線 */
}
</style>
我們用內邊距（即填充padding）的方式，讓每個菜單變得寬一些，如果你的菜單是中英文混排的，建議設置單個菜單的高寬，這樣可以避免中英文字符行高不一致導致的高度誤差。設置固定高度的方式：
<style type="text/css">
#menu li a {
display:block; /* 將鏈接設為塊級元素 */
width:150px; /* 設置寬度 */
height:30px; /* 設置高度 */
line-height:30px; /* 設置行高，將行高和高度設置同一個值，可以讓單行文本垂直居中 */
text-align:center; /* 居中對齊文字 */
background:#3A4953; /* 設置背景色 */
color:#fff; /* 設置文字顏色 */
text-decoration:none; /* 去掉下划線 */
border-right:1px solid #000; /* 在左側加上分隔線 */
}
</style>
4、鏈接懸停效果：
通過以上幾步的綜合作用，一個橫向導航欄的初步框架就出現了。此步主要是定義鏈接的懸停效果，讓導航欄更美觀。當然，如果要讓導航欄更炫麗，你可以在CSS懸停屬性上定義背景圖片。
<style type="text/css">
#menu li a:hover {
background:#146C9C; /* 變換背景色 */
color:#fff; /* 變換文字顏色 */
}
</style>
這里的代碼一個缺陷，最右邊會多出來一個邊框，由於 :first-child 偽類不被IE系列瀏覽器所支持，我們只能單獨寫一個樣式，將最后一個邊框去掉，同時要給 HTML 代碼增加一個額外選擇符。
<ul id="menu">
<li><a href="http://www.baidu.com">Baidu.Com</a></li>
<li><a href="http://www.Code52.Net">Code52.Net</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com" class="last">Google.com</a></li>
</ul>
<style type="text/css">
#menu li a.last {
border-right:0; /* 去掉左側邊框 */
}
</style>
好了，到這里一個簡單的橫向導航菜單就制作完成了，是不是很簡單？ 下面給出完整代碼：
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif;
}
#menu, #menu li {
list-style:none;
padding:0;
margin:0;
}
#menu li {
float:left;
}
#menu li a {
display:block;
/* 如果是中英文混排的文字，建議用固定寬度
width:150px;
height:30px;
line-height:30px;
text-align:center;
*/
padding:8px 50px;
background:#3A4953;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a:hover {
background:#146C9C;
color:#fff;
text-decoration:none;
border-right:1px solid #000;
}
#menu li a.last {
border-right:0; /* 去掉左側邊框 */
}
</style>
<ul id="menu"> <li><a href="http://www.baidu.com">Baidu.Com</a></li> <li><a href="http://www.Code52.Net">Code52.Net</a></li> <li><a href="http://www.yahoo.com">Yahoo.com</a></li> <li><a href="http://www.google.com" class="last">Google.com</a></li> </ul>
你可以查看我們制作的在線演示和下載本文提供的實例包。
上面的CSS樣式，我修改了一下。如下：
<style type="text/css"> #menu { font-size: 12px; font-weight: bolder; } #menu li{ list-style-image: none; list-style-type: none; background-color: #999999; border-right-width: 1px; border-right-style: solid; border-right-color: #000000; float: left; } #menu li a{ color: #FFFFFF; text-decoration: none; margin: 0px; padding-top: 8px; display: block; /* 作為一個塊 */ padding-right: 50px; /* 設置塊的屬性 */ padding-bottom: 8px; padding-left: 50px; } #menu li a:hover{ background-color: #0099CC; }
</style>