前面幾篇博文都在講導航菜單和二級下拉式菜單，其實有很多方法都可以實現的，具體的情況還要視情況而定。
在后面學習到jQuery框架之后，會有更豐富的動畫效果，由于在學習Ajax和jQuery的初步階段，對于很多的復雜的導航菜單和二級下拉式菜單沒法做，但是學習了CSS和JS還是能實現一些簡單的變換的。這篇博文就來說說用CSS實現導航菜單結合二級下拉式菜單的兩個簡單變換吧。
首先還是在前面博文的基礎上加以實現，其實只用HTML和CSS還是可以做出不錯的效果，但是相較于JS和jQuery來說就有很大的差距了。這些問題在學習完JS和jQuery之后你就會深有感觸。
### 一.中英文切換導航菜單
制作原理：在二級下拉式菜單的基礎上加以變換就可以實現，在鼠標懸浮在相應的菜單上，二級菜單出現在導航菜單的下面，我們可以把英文的菜單當做是二級菜單，在顯示的時候將其反向向上移動到導航菜單上，讓多出的部分隱藏即可實現。
瀏覽器的兼容性問題：我測試的瀏覽器是火狐，谷歌，2345瀏覽器，以及IE7和8。
代碼：
~~~
<!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">
.nav{
padding-left:40px;
font-size:20px;
font-family:"微軟雅黑";
list-style:none;
font-weight:bold;
overflow:hidden;/*此處的作用可以清除浮動*/
border-bottom:10px solid #FF6600;
}
.nav li{
float:left;
margin-right:1px;
}
.nav li a{
text-decoration:none;
line-height:40px;
background-color:#EEEEEE;
color:#000000;
display:block;
width:100px;
text-align:center;
}
/*默認狀態下不顯示*/
.nav li a span{
display:none;
}
/*鼠標移到相應元素顯示英文*/
.nav li a:hover span{
display:block;
background-color:#FF6600;
color:#FFFFFF;
}
/*反向使用上外邊距，使其原來的中文隱藏*/
.nav li a:hover{
margin-top:-40px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首頁<span>Home</span></a></li>
<li><a href="#">課程大廳<span>Course</span></a></li>
<li><a href="#">學習中心<span>Learn</span></a></li>
<li><a href="#">經典案例<span>Case</span></a></li>
<li><a href="#">關于我們<span>About</span></a></li>
</ul>
</body>
</html>
~~~
初始化效果：
鼠標懸浮效果：
### 二.多級菜單
前面有三篇博文講到了二級下拉式菜單分別用CSS，JS和JQuery實現，做法有很多，這次主要是還是用CSS實現。相關的博文請參考：[Web前端開發實戰1：二級下拉式菜單之CSS實現](http://blog.csdn.net/erlian1992/article/details/50437179)，[Web前端開發實戰2：二級下拉式菜單之](http://blog.csdn.net/erlian1992/article/details/50441191)[JS實現](http://blog.csdn.net/erlian1992/article/details/50441191)和[Web前端開發實戰3：二級下拉式菜單之jQuery實現](http://blog.csdn.net/erlian1992/article/details/50443474)。
制作原理同二級下拉式菜單一樣。瀏覽器測試為：IE7,8，谷歌，火狐，2345瀏覽器。
代碼：
~~~
<!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">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.nav{
font-size:16px;
font-family:"微軟雅黑";
font-weight:bold;
margin:20px 50px;
}
.nav li{
float:left;
margin-right:1px;
}
.nav li a{
text-decoration:none;
line-height:30px;
background-color:#EEEEEE;
color:#000000;
display:block;
width:120px;
text-align:center;
}
.nav li a:hover{
background-color:#FF6600;
color:#FFFFFF;
}
.nav li ul{
display:none;
}
.nav li ul li{
margin-top:1px;
position:relative;
}
/*鼠標移到相應元素上顯示二級菜單*/
.nav li:hover ul{
display:block;
width:120px;
}
.nav li:hover ul li ul{
display:none;
}
.nav li:hover ul li ul li{
margin-left:1px;
}
/*鼠標移到相應二級菜單元素上顯示三級菜單*/
.nav li ul li:hover ul{
display:block;
position:absolute;
top:0px;
left:120px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">課程大廳+</a>
<ul>
<li><a href="#">視頻課程+</a>
<ul>
<li><a href="#">Java</a>
<li><a href="#">PHP</a>
<li><a href="#">C語言</a>
</ul>
</li>
<li><a href="#">案例學習+</a>
<ul>
<li><a href="#">編程練習</a>
<li><a href="#">實例操作</a>
<li><a href="#">答案解析</a>
</ul>
</li>
<li><a href="#">交流學習</a></li>
</ul>
</li>
<li><a href="#">學習中心+</a>
<ul>
<li><a href="#">前端課程+</a>
<ul>
<li><a href="#">HTML/CSS</a>
<li><a href="#">JavaScript</a>
<li><a href="#">jQuery</a>
</ul>
</li>
<li><a href="#">手機開發+</a>
<ul>
<li><a href="#">IOS開發</a>
<li><a href="#">WP開發</a>
<li><a href="#">安卓開發</a>
</ul>
</li>
<li><a href="#">后臺編程</a></li>
</ul>
</li>
<li><a href="#">關于我們</a></li>
</ul>
</body>
</html>
~~~
初始化效果：
? ? ? ? ?二級下拉菜單效果：
? ? ? ? ?三級菜單效果：
這些其實都是最基礎的東西，每種方法都有其自己的方式和特點以及瀏覽器兼容性問題。可能也會因個人的方
式實現會有不同的代碼，但是學會了制作的原理，就會很容易實現。CSS實現導航菜單簡單變換，我會在以后的博文
中使用JS和jQuery實現，同時也要比較幾種方法的代碼簡練程度和實現效果的方式更有瀏覽器的兼容性問題。從最基
礎Web實戰開始，一步一步去實現復雜的網站架構和網站布局和網站效果展示。
