在前面的博文中我們提到橫向一級菜單，這里我們來看看導航菜單。導航菜單種類很多，但是制作原理都是大同小異的，這里看的比二級下拉式菜單還簡單。來看一些網站上的導航菜單：
垂直導航菜單：
水平導航菜單：
### 一.垂直菜單制作原理：
(1)用無序列表構建菜單；
(2)< a >標簽的設置：ul a{display:block;}。定義的關鍵是將< a >標簽設置為塊元素。
代碼：
~~~
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>導航菜單</title>
<style type="text/css">
/*CSS全局設置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微軟雅黑";
}
.nav{
height:200px;
width:90px;
margin-top:50px;
margin-left:10px;
}
.nav ul{
list-style:none;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
/*設置的關鍵*/
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-bottom:1px;
}
.nav li a:hover{
background-color:#FF6600;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a href="#">網站首頁</a></li>
<li><a href="#">課程大廳</a></li>
<li><a href="#">學習中心</a></li>
<li><a href="#">經典案例</a></li>
<li><a href="#">關于我們</a></li>
</ul>
</div>
</body>
</html>
~~~
效果展示：
初始化狀態或鼠標離開的狀態：
鼠標放上去的狀態：
### 二.水平菜單
制作原理：在垂直菜單的基礎上，將li元素進行左浮動設置。由于li元素浮動脫離原來的文檔流會失去寬和高，因此一定要在a元素上使用display: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元素的背景即可。
完整的代碼：
~~~
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>導航菜單</title>
<style type="text/css">
/*CSS全局設置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微軟雅黑";
}
.nav{
height:50px;
margin-top:20px;
margin-left:10px;
}
.nav ul{
list-style:none;
height:50px;
border-bottom:10px solid #FF6600;
padding-left:30px;
}
.nav li{
float:left;
margin-top:10px;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-left:1px;
/*設置圓角屬性,IE6,7,8不支持*/
border-top-left-radius:15px;
border-top-right-radius:15px;
}
.nav li a:hover,.nav li a.on{
background-color:#FF6600;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a class="on" href="#">網站首頁</a></li>
<li><a href="#">課程大廳</a></li>
<li><a href="#">學習中心</a></li>
<li><a href="#">經典案例</a></li>
<li><a href="#">關于我們</a></li>
</ul>
</div>
</body>
</html>
~~~
效果展示：
初始化狀態或鼠標離開的狀態：
鼠標移上去的狀態：
