Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换_html/css

在后面学习到jQuery框架之后，会有更丰富的动画效果，由于在学习Ajax和jQuery的初步阶段，对于很多的复杂的导

航菜单和二级下拉式菜单没法做，但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现

导航菜单结合二级下拉式菜单的两个简单变换吧。

首先还是在前面博文的基础上加以实现，其实只用HTML和CSS还是可以做出不错的效果，但是相较于JS和

jQuery来说就有很大的差距了。这些问题在学习完JS和jQuery之后你就会深有感触。

一中英文切换导航菜单

制作原理：在二级下拉式菜单的基础上加以变换就可以实现，在鼠标悬浮在相应的菜单上，二级菜单出现在导航

菜单的下面，我们可以把英文的菜单当做是二级菜单，在显示的时候将其反向向上移动到导航菜单上，让多出的部分

隐藏即可实现。

浏览器的兼容性问题：我测试的浏览器是火狐，谷歌，2345浏览器，以及IE7和8。

代码：

	 
首页Home
	 
课程大厅Course
	 
学习中心Learn
	 
经典案例Case
	 
关于我们About

鼠标悬浮效果：

二多级菜单

前面有三篇博文讲到了二级下拉式菜单分别用CSS，JS和JQuery实现，做法有很多，这次主要是还是用CSS实

现。相关的博文请参考：Web前端开发实战1：二级下拉式菜单之CSS实现，Web前端开发实战2：二级下拉式菜单之

JS实现和Web前端开发实战3：二级下拉式菜单之jQuery实现。

制作原理同二级下拉式菜单一样。浏览器测试为：IE7,8，谷歌，火狐，2345浏览器。

代码：

 
首页
	 
课程大厅+	 	 
视频课程+	 	 
Java	 
PHP	 
C语言	 	 
	 
案例学习+	 	 
编程练习	 
实例操作	 
答案解析	 	 
	 
交流学习
	 	 	 
学习中心+	 	 
前端课程+	 	 
HTML/CSS	 
JavaScript	 
jQuery	 	 
	 
手机开发+	 	 
IOS开发	 
WP开发	 
安卓开发	 
	 
后台编程
	 	 	 
关于我们

二级下拉菜单效果：

三级菜单效果：

这些其实都是最基础的东西，每种方法都有其自己的方式和特点以及浏览器兼容性问题。可能也会因个人的方

式实现会有不同的代码，但是学会了制作的原理，就会很容易实现。CSS实现导航菜单简单变换，我会在以后的博文

中使用JS和jQuery实现，同时也要比较几种方法的代码简练程度和实现效果的方式更有浏览器的兼容性问题。从最基

础Web实战开始，一步一步去实现复杂的网站架构和网站布局和网站效果展示。