用CSS3设计响应式导航菜单

       春节将至，先祝大家新年快乐。我在这段时间内将会抽出时间由浅入深的发表几篇CSS3、HTML5最新的技术文章，涉及原理、实现、应用的几个层面，代表了国外HTML5最新发展的趋势，希望能给大家带来新的启迪。         下面的这篇文章非常简单，是响应式设计的一个具体实现。我希望能带给刚入门的朋友一些思路和帮助。         ……………………………………✄……………………………………         关于使用响应式设计来创建一个手机导航栏，之前我曾经写过一个[教程](http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial)。现在我发现了一种新的方式，可以不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记，而且菜单可以居左、居中和居右对齐。不像前面一个教程中需要点击来展开，这个菜单可以在hover时展开，对用户更为友好。它也包含一个指示器来显示当前激活的菜单项。这种方式可以工作于所有的移动和桌面浏览器中，甚至包括IE。 [** 演示**](http://webdesignerwall.com/demo/responsive-menu/)         **目标**        这个教程的目标是向你展示如何把一个传统的列表菜单在更小的屏幕上转换为可伸展的菜单。  [](http://webdesignerwall.com/demo/responsive-menu/)        这种方式对于下图这种有很多链接的导航来说非常有用。你可以把所有的按钮转换为一个优雅的伸展条。         **HTML代码**        下面是导航的HTML代码。