一款纯css3实现的竖形二级导航的实例教程

前端  /  管理员 发布于 7年前   177

　　之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div style="width: 700px; margin: auto;">  
2.         <div class="W1-h16">  
3.             <ul>  
4.                 <li class="has-sub"><a href="#">Menu 1</a>  
5.                     <ul>  
6.                         <li class="has-sub"><a href="#">Submenu 1.1</a>  
7.                             <ul>  
8.                                 <li><a href="#">Submenu 1.1.1</a></li>  
9.                                 <li class="has-sub"><a href="#">Submenu 1.1.2</a>  
10.                                     <ul>  
11.                                         <li><a href="#">Submenu 1.1.2.1</a></li>  
12.                                         <li><a href="#">Submenu 1.1.2.2</a></li>  
13.                                     </ul>  
14.                                 </li>  
15.                             </ul>  
16.                         </li>  
17.                         <li><a href="#">Submenu 1.2</a></li>  
18.                     </ul>  
19.                 </li>  
20.                 <li class="has-sub"><a href="#">Menu 2</a>  
21.                     <ul>  
22.                         <li><a href="#">Submenu 2.1</a></li>  
23.                         <li><a href="#">Submenu 2.2</a></li>  
24.                     </ul>  
25.                 </li>  
26.                 <li class="has-sub"><a href="#">Menu 3</a>  
27.                     <ul>  
28.                         <li><a href="#">Submenu 3.1</a></li>  
29.                         <li><a href="#">Submenu 3.2</a></li>  
30.                     </ul>  
31.                 </li>  
32.             </ul>  
33.         </div>  
34.     </div>  

　　css3代码：

CSS Code复制内容到剪贴板

1. .W1-h16 {   
2.   padding: 0;   
3.   margin: 0;   
4.   border: 0;   
5.   line-height: 1;   
6. }   
7. .W1-h16 ul,   
8. .W1-h16 ul li,   
9. .W1-h16 ul ul {   
10.   list-style: none;   
11.   margin: 0;   
12.   padding: 0;   
13. }   
14. .W1-h16 ul {   
15.   position: relative;   
16.   z-index: 500;   
17.   float: left;   
18. }   
19. .W1-h16 ul li {   
20.   float: left;   
21.   min-height: 0.05em;   
22.   line-height: 1em;   
23.   vertical-align: middle;   
24.   position: relative;   
25. }   
26. .W1-h16 ul li.hover,   
27. .W1-h16 ul li:hover {   
28.   position: relative;   
29.   z-index: 510;   
30.   cursor: default;   
31. }   
32. .W1-h16 ul ul {   
33.   visibility: hidden;   
34.   position: absolute;   
35.   top: 100%;   
36.   left: 0px;   
37.   z-index: 520;   
38.   width: 100%;   
39. }   
40. .W1-h16 ul ul li {   
41.   float: none;   
42. }   
43. .W1-h16 ul ul ul {   
44.   top: 0;   
45.   rightright: 0;   
46. }   
47. .W1-h16 ul li:hover > ul {   
48.   visibility: visible;   
49. }   
50. .W1-h16 ul ul {   
51.   top: 0;   
52.   left: 99%;   
53. }   
54. .W1-h16 ul li {   
55.   float: none;   
56. }   
57. .W1-h16 ul ul {   
58.   margin-top: 0.05em;   
59. }   
60. .W1-h16 {   
61.   width: 13em;   
62.   background: #333333;   
63.   font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;   
64.   zoom: 1;   
65. }   
66. .W1-h16:before {   
67.   content: '';   
68.   display: block;   
69. }   
70. .W1-h16:after {   
71.   content: '';   
72.   display: table;   
73.   clear: both;   
74. }   
75. .W1-h16 a {   
76.   display: block;   
77.   padding: 1em 1.3em;   
78.   color: #ffffff;   
79.   text-decoration: none;   
80.   text-transform: uppercase;   
81. }   
82. .W1-h16 > ul {   
83.   width: 13em;   
84. }   
85. .W1-h16 ul ul {   
86.   width: 13em;   
87. }   
88. .W1-h16 > ul > li > a {   
89.   border-right: 0.3em solid #1b9bff;   
90.   color: #ffffff;   
91. }   
92. .W1-h16 > ul > li > a:hover {   
93.   color: #ffffff;   
94. }   
95. .W1-h16 > ul > li a:hover,   
96. .W1-h16 > ul > li:hover a {   
97.   background: #1b9bff;   
98. }   
99. .W1-h16 li {   
100.   position: relative;   
101. }   
102. .W1-h16 ul li.has-sub > a:after {   
103.   content: '»';   
104.   position: absolute;   
105.   rightright: 1em;   
106. }   
107. .W1-h16 ul ul li.first {   
108.   -webkit-border-radius: 0 3px 0 0;   
109.   -moz-border-radius: 0 3px 0 0;   
110.   border-radius: 0 3px 0 0;   
111. }   
112. .W1-h16 ul ul li.last {   
113.   -webkit-border-radius: 0 0 3px 0;   
114.   -moz-border-radius: 0 0 3px 0;   
115.   border-radius: 0 0 3px 0;   
116.   border-bottom: 0;   
117. }   
118. .W1-h16 ul ul {   
119.   -webkit-border-radius: 0 3px 3px 0;   
120.   -moz-border-radius: 0 3px 3px 0;   
121.   border-radius: 0 3px 3px 0;   
122. }   
123. .W1-h16 ul ul {   
124.   border: 1px solid #0082e7;   
125. }   
126. .W1-h16 ul ul a {   
127.   color: #ffffff;   
128. }   
129. .W1-h16 ul ul a:hover {   
130.   color: #ffffff;   
131. }   
132. .W1-h16 ul ul li {   
133.   border-bottom: 1px solid #0082e7;   
134. }   
135. .W1-h16 ul ul li:hover > a {   
136.   background: #4eb1ff;   
137.   color: #ffffff;   
138. }   
139. .W1-h16.align-rightright > ul > li > a {   
140.   border-left: 0.3em solid #1b9bff;   
141.   border-right: none;   
142. }   
143. .W1-h16.align-rightright {   
144.   float: rightright;   
145. }   
146. .W1-h16.align-rightright li {