標籤：fonts img height name 網站 外邊距 jsb hover 關於我
前面幾篇博文都在講導覽功能表和二級下拉式菜單，事實上有非常多方法都能夠實現的。詳細的情況還要視情況而定。
在後面學習到jQuery架構之後，會有更豐富的動畫效果。因為在學習Ajax和jQuery的初步階段。對於非常多的複雜的導
航菜單和二級下拉式菜單沒法做，可是學習了CSS和JS還是能實現一些簡單的變換的。
這篇博文就來說說用CSS實現
導航菜單結合二級下拉式菜單的兩個簡單變換吧。
首先還是在前面博文的基礎上加以實現。事實上僅僅用HTML和CSS還是能夠做出不錯的效果。可是相較於JS和
jQuery來說就有非常大的差距了。這些問題在學習完JS和jQuery之後你就會深有感觸。
一中英文切換導覽功能表
製作原理：在二級下拉式菜單的基礎上加以變換就能夠實現。在滑鼠懸浮在對應的菜單上。二級菜單出如今導航
菜單的以下。我們能夠把英文的菜單當做是二級菜單。在顯示的時候將其反向向上移動到導覽功能表上，讓多出的部分
隱藏就可以實現。
瀏覽器的相容性問題：我測試的瀏覽器是Firefox。Google，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實現，Web前端開發實戰2：二級下拉式菜單之
JS實現和Web前端開發實戰3：二級下拉式菜單之jQuery實現。
製作原理同二級下拉式菜單一樣。
瀏覽器測試為：IE7,8。Google，Firefox，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> 初始化效果：
二級下拉式功能表效果：
三級菜單效果：
這些事實上都是最基礎的東西，每種方法都有其自己的方式和特點以及瀏覽器安全色性問題。
可能也會因個人的方
式實現會有不同的代碼，可是學會了製作的原理，就會非常easy實現。CSS實現導覽功能表簡單變換，我會在以後的博文
中使用JS和jQuery實現，同一時候也要比較幾種方法的代碼簡練程度和實現效果的方式更有瀏覽器的相容性問題。從最基
礎Web實戰開始，一步一步去實現複雜的網站架構和網站布局和網站效果展示。
Web前端開發實戰6：CSS實現導覽功能表結合二級下拉式菜單的簡單變換
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
