[转载] CSS DIV设计实例：超酷的竖排导航栏

1.   
   
2. 以下是引用片段：
   
3. <div id="navcontainer">
   
4. <ul id="navlist">
   
5. <li id="active"><a href="#" id="current">Item one</a>
   
6. <ul id="subnavlist">
   
7. <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
   
8. <li><a href="#">Subitem two</a></li>
   
9. <li><a href="#">Subitem three</a></li>
   
10. <li><a href="#">Subitem four</a></li>
    
11. </ul>
    
12. </li>
    
13. <li><a href="#">Item two</a></li>
    
14. <li><a href="#">Item three</a></li>
    
15. <li><a href="#">Item four</a></li>
    
16. </ul>
    
17. </div>
    
18. CSS：
    
19. 以下是引用片段：
    
20. #navcontainer { margin-left: 30px; }
    
21. #navcontainer ul
    
22. {
    
23. margin: 0;
    
24. padding: 0;
    
25. list-style-type: none;
    
26. font-family: verdana, arial, Helvetica, sans-serif;
    
27. }
    
28. #navcontainer li { margin: 0; }
    
29. #navcontainer a
    
30. {
    
31. display: block;
    
32. padding: 5px 10px;
    
33. width: 140px;
    
34. color: #000;
    
35. background-color: #ADC1AD;
    
36. text-decoration: none;
    
37. border-top: 1px solid #fff;
    
38. border-left: 1px solid #fff;
    
39. border-bottom: 1px solid #333;
    
40. border-right: 1px solid #333;
    
41. font-weight: bold;
    
42. font-size: .8em;
    
43. background-image: url(images/vertical06.jpg);
    
44. background-repeat: no-repeat;
    
45. background-position: 0 0;
    
46. }
    
47. #navcontainer a:hover
    
48. {
    
49. color: #000;
    
50. background-color: #889E88;
    
51. text-decoration: none;
    
52. border-top: 1px solid #333;
    
53. border-left: 1px solid #333;
    
54. border-bottom: 1px solid #fff;
    
55. border-right: 1px solid #fff;
    
56. background-image: url(images/vertical06a.jpg);
    
57. background-repeat: no-repeat;
    
58. background-position: 0 0;
    
59. }
    
60. #navcontainer ul ul li { margin: 0; }
    
61. #navcontainer ul ul a
    
62. {
    
63. display: block;
    
64. padding: 5px 5px 5px 30px;
    
65. width: 125px;
    
66. color: #000;
    
67. background-color: #C5D8C5;
    
68. text-decoration: none;
    
69. font-weight: normal;
    
70. }
    
71. #navcontainer ul ul a:hover
    
72. {
    
73. color: #000;
    
74. background-color: #889E88;
    
75. text-decoration: none;
    
76. }
    
77. 
    
78. ABOUT THE CODE
    
79. Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.
    

复制代码