使用CSS3制作响应式导航菜单的方法

1.   
2. .nav {   
3.     position: relative;   
4.     margin: 20px 0;   
5. }   
6. .nav ul {   
7.     margin: 0;   
8.     padding: 0;   
9. }   
10. .nav li {   
11.     margin: 0 5px 10px 0;   
12.     padding: 0;   
13.     list-style: none;   
14.     display: inline-block;   
15. }   
16. .nav a {   
17.     padding: 3px 12px;   
18.     text-decoration: none;   
19.     color: #999;   
20.     line-height: 100%;   
21. }   
22. .nav a:hover {   
23.     color: #000;   
24. }   
25. .nav .current a {   
26.     background: #999;   
27.     color: #fff;   
28.     border-radius: 5px;   
29. }  

　　居中与居右对齐

　　像上面所提到的一样，你可以使用text-align属性更改按钮的对其方式。

1.   
2. .nav.rightright ul {   
3.     text-align: rightright;   
4. }   
5.     
6.   
7. .nav.center ul {   
8.     text-align: center;   
9. }  

         IE支持

         IE8或更早的版本不支持HTML5的