在前面的博文中我們提到橫向一級菜單無序列表做導航條，這里我們來看看導航菜單。導航菜單種類很多，但是制作原理都是大同
小異的，這里看的比二級下拉式菜單還簡單。來看一些網站上的導航菜單：
垂直導航菜單：
水平導航菜單：
一垂直菜單
制作原理：(1)用無序列表構建菜單；(2)標簽的設置：ul li a{:block;}。定義的關鍵是將標簽設置為
塊元素。
代碼：
導航菜單
效果展示：
初始化狀態或鼠標離開的狀態：
鼠標放上去的狀態：
二水平菜單
制作原理：在垂直菜單的基礎上，將li元素進行左浮動設置。由于li元素浮動脫離原來的文檔流會失去寬和高，因
此一定要在a元素上使用:block屬性將其變為塊級元素，然后進行寬和高的設置。
只改變CSS樣式代碼：
/*CSS全局設置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微軟雅黑";
}
.nav{
height:40px;
margin-top:50px;
margin-left:10px;
}
.nav ul{
list-style:none;
}
/*設置的關鍵*/
.nav li{
float:left;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-right:1px;
}
.nav li a:hover{
background-color:#FF6600;
color:#FFFFFF;
}效果展示：
三圓角菜單
制作原理：在水平菜單的基礎上我們進行CSS圓角屬性的設置，但是IE6,7,8瀏覽器并不支持這個屬性無序列表做導航條，制作一定
要考慮瀏覽器的兼容性，在這里我們使用圓角屬性。解決不兼容的方法就是我們可以裁剪圓角背景圖作為每個li元素
的背景即可。
完整的代碼：
導航菜單
效果展示：
初始化狀態或鼠標離開的狀態：
鼠標移上去的狀態：