HTML5+CSS3实现响应式导航菜单（html响应式导航栏）
不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记，而且菜单可以居左、居中和居右对齐，它也包含一个指示器来显示当前激活的菜单项。菜单可以在hover时展开，触屏手机如果点击的话会变成链接跳转，需要用手拨动才是正常的，关闭的话即点击其它地方。
演示地址：http://webdesignerwall.com/demo/responsive-menu/
HTML代码
CSS代码
导航的CSS样式（桌面视图）非常简单，请注意我为导航的
元素指定了display:inline-block来取代float:left。这样可以通过为元素设定text-align属性来控制菜单按钮居左、居中或者居右对齐。
/* nav */
.nav {
position: relative;
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
居中与居右对齐
像上面所提到的一样，你可以使用text-align属性更改按钮的对其方式。
/* right nav */
.nav.right ul {
text-align: right;
}
/* center nav */
.nav.center ul {
text-align: center;
}
IE支持
E8或更早的版本不支持HTML5的
