下面我们给大家介绍一下CSS3的一个简单导航栏实现吧!希望大家可以在这里学习!

html

1. <nav>
2. <ul class="nav-ul">
3. <li>
4. <a href="/">首页</a>
5. </li>
6. <li>
7. <a href="/category/frontend">Web前端</a>
8. <ul>
9. <li class="nav-effect-1">
10. <a href="/category/frontend/javascript">JavaScript</a>
11. </li>
12. <li class="nav-effect-2">
13. <a href="/category/frontend/jq">JQuery</a>
14. </li>
15. <li class="nav-effect-3">
16. <a href="/category/frontend/style">CSS</a>
17. </li>
18. <li class="nav-effect-4">
19. <a href="/category/frontend/html">HTML</a>
20. </li>
21. </ul>
22. </li>
23. <li>
24. <a href="/category/end">后端</a>
25. <ul>
26. <li class="nav-effect-1">
27. <a href="/category/end/python-end">Python</a>
28. </li>
29. <li class="nav-effect-2">
30. <a href="category/end/php">PHP</a>
31. </li>
32. </ul>
33. </li>
34. <li>
35. <a href="/category/trivial">琐碎杂类</a>
36. <ul>
37. <li class="nav-effect-1">
38. <a href="/category/trivial/linux">Linux</a>
39. </li>
40. <li class="nav-effect-2">
41. <a href="/category/trivial/ajax">Ajax</a>
42. </li>
43. </ul>
44. </li>
45. <li>
46. <a href="/category/life">我的生活</a>
47. <ul>
48. <li class="nav-effect-1">
49. <a href="/category/life/college">College</a>
50. </li>
51. <li class="nav-effect-2">
52. <a href="/category/life/review">Review</a>
53. </li>
54. <li class="nav-effect-3">
55. <a href="/category/life/sentiment">Sentiment</a>
56. </li>
57. </ul>
58. </li>
59. <li>
60. <a href="#">关于我</a>
61. <ul>
62. <li class="nav-effect-1">
63. <a href="/contribute">友情链接</a>
64. </li>
65. <li class="nav-effect-2">
66. <a href="/message">留言板</a>
67. </li>
68. </ul>
69. </li>
70. </ul>
71. </nav>

css:

1. *{
2. margin:0 auto;
3. }
4. body{
5. background-color: #EEEEEE;
6. font-family: Microsoft Yahei,Arial,sans-serif;
7. }
8. nav{
9. width: 100%;
10. background-color: #455552;
11. position: relative;
12. width: 650px;
13. margin-top: 100px;
14. }
15. .nav-ul{
16. list-style: none;
17. }
18. .nav-ul>li{
19. display: inline-block;
20. position: relative;
21. }
22. .nav-ul a{
23. text-decoration: none;
24. color: #FFF;
25. display: inline-block;
26. padding: 10px 20px;
27. }