不需要JS支持的高级导航栏

支持IE7 FF  目前不支持IE6

1. <style type="text/css">
   
2. body,td,th,input {
   
3. font-family:Arial, Helvetica, sans-serif;
   
4. font-size:12px;
   
5. }
   
6. #bar {
   
7. background:#E8E8E8;
   
8. border-top:1px solid #FFF;
   
9. border-bottom:1px solid #CCC;
   
10. height:25px;
    
11. margin:0;
    
12. cursor:default;
    
13. }
    
14. #bar ul {
    
15. list-style:none;
    
16. margin:0;
    
17. padding:0;
    
18. }
    
19. #bar li {position:relative}
    
20. #bar li,
    
21. #bar li:visited,
    
22. #bar li:hover,
    
23. #bar li:active {
    
24. margin-right:5px;
    
25. line-height:25px;
    
26. display:inline;
    
27. padding:4px 7px;
    
28. width:300px;
    
29. color:#000;
    
30. text-decoration:none;
    
31. }
    
32. #bar li:hover,
    
33. #bar li:focus {
    
34. color:#FFF;
    
35. background:#006;
    
36. }
    
37. .menu {
    
38. visibility:hidden;
    
39. position:absolute;
    
40. top:23px !important;
    
41. top:24px;
    
42. left:0;
    
43. background:#E8E8E8;
    
44. border:1px solid #CCC;
    
45. padding:1px;
    
46. }
    
47. #bar li:hover .menu,
    
48. #bar li:focus .menu {visibility:visible}
    
49. .menu a:link,
    
50. .menu a:visited,
    
51. .menu a:hover,
    
52. .menu a:active {
    
53. color:#000;
    
54. text-decoration:none;
    
55. display:block;
    
56. height:25px;
    
57. padding:0 30px;
    
58. cursor:default;
    
59. }
    
60. .menu dd {
    
61. margin:0;
    
62. color:#000;
    
63. height:25px;
    
64. }
    
65. .menu dd:hover a,
    
66. .menu dd:focus a {
    
67. color:#FFF;
    
68. background:#006;
    
69. }
    
70. </style>
    
71. <div id="bar">
    
72. <ul>
    
73. <li>File
    
74. <dl class="menu">
    
75. <dd><a href="logout.php">Close</a></dd>
    
76. </dl>
    
77. </li>
    
78. <li>Edit
    
79. <dl class="menu">
    
80. <dd><a href="configuration.php">Configuration</a></dd>
    
81. </dl></li>
    
82. <li>Tools
    
83. <dl class="menu">
    
84. <dd><a href="update.php">Update</a></dd>
    
85. <dd><a href="options.php">Options</a></dd>
    
86. </dl></li>
    
87. <li>Help
    
88. <dl class="menu">
    
89. <dd><a href="content.php">Content</a></dd>
    
90. <dd><a href="about.php">About</a></dd>
    
91. </dl></li>
    
92. </ul>
    
93. </div>

复制代码