如何使用純css3實現的豎形二級導航

這篇文章主要介紹了如何使用純css3實現的豎形二級導航，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　html代碼：

1. <div style="width: 700px; margin: auto;">  

2.         <div class="W1-h26">  

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-h26 {   

2.   padding: 0;   

3.   margin: 0;   

4.   border: 0;   

5.   line-height: 1;   

6. }   

7. .W1-h26 ul,   

8. .W1-h26 ul li,   

9. .W1-h26 ul ul {   

10.   list-style: none;   

11.   margin: 0;   

12.   padding: 0;   

13. }   

14. .W1-h26 ul {   

15.   position: relative;   

16.   z-index: 500;   

17.   float: left;   

18. }   

19. .W1-h26 ul li {   

20.   float: left;   

21.   min-height: 0.05em;   

22.   line-height: 1em;   

23.   vertical-align: middle;   

24.   position: relative;   

25. }   

26. .W1-h26 ul li.hover,   

27. .W1-h26 ul li:hover {   

28.   position: relative;   

29.   z-index: 510;   

30.   cursor: default;   

31. }   

32. .W1-h26 ul ul {   

33.   visibility: hidden;   

34.   position: absolute;   

35.   top: 100%;   

36.   left: 0px;   

37.   z-index: 520;   

38.   width: 100%;   

39. }   

40. .W1-h26 ul ul li {   

41.   float: none;   

42. }   

43. .W1-h26 ul ul ul {   

44.   top: 0;   

45.   rightright: 0;   

46. }   

47. .W1-h26 ul li:hover > ul {   

48.   visibility: visible;   

49. }   

50. .W1-h26 ul ul {   

51.   top: 0;   

52.   left: 99%;   

53. }   

54. .W1-h26 ul li {   

55.   float: none;   

56. }   

57. .W1-h26 ul ul {   

58.   margin-top: 0.05em;   

59. }   

60. .W1-h26 {   

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-h26 a {   

76.   display: block;   

77.   padding: 1em 1.3em;   

78.   color: #ffffff;   

79.   text-decoration: none;   

80.   text-transform: uppercase;   

81. }   

82. .W1-h26 > ul {   

83.   width: 13em;   

84. }   

85. .W1-h26 ul ul {   

86.   width: 13em;   

87. }   

88. .W1-h26 > ul > li > a {   

89.   border-right: 0.3em solid #1b9bff;   

90.   color: #ffffff;   

91. }   

92. .W1-h26 > ul > li > a:hover {   

93.   color: #ffffff;   

94. }   

95. .W1-h26 > ul > li a:hover,   

96. .W1-h26 > ul > li:hover a {   

97.   background: #1b9bff;   

98. }   

99. .W1-h26 li {   

100.   position: relative;   

101. }   

102. .W1-h26 ul li.has-sub > a:after {   

103.   content: '&raquo;';   

104.   position: absolute;   

105.   rightright: 1em;   

106. }   

107. .W1-h26 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-h26 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-h26 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-h26 ul ul {   

124.   border: 1px solid #0082e7;   

125. }   

126. .W1-h26 ul ul a {   

127.   color: #ffffff;   

128. }   

129. .W1-h26 ul ul a:hover {   

130.   color: #ffffff;   

131. }   

132. .W1-h26 ul ul li {   

133.   border-bottom: 1px solid #0082e7;   

134. }   

135. .W1-h26 ul ul li:hover > a {   

136.   background: #4eb1ff;   

137.   color: #ffffff;   

138. }   

139. .W1-h26.align-rightright > ul > li > a {   

140.   border-left: 0.3em solid #1b9bff;   

141.   border-right: none;   

142. }   

143. .W1-h26.align-rightright {   

144.   float: rightright;   

145. }   

146. .W1-h26.align-rightright li {   

147.   text-align: rightright;   

148. }   

149. .W1-h26.align-rightright ul li.has-sub > a:before {   

150.   content: '+';   

151.   position: absolute;   

152.   top: 50%;   

153.   left: 15px;   

154.   margin-top: -6px;   

155. }   

156. .W1-h26.align-rightright ul li.has-sub > a:after {   

157.   content: none;   

158. }   

159. .W1-h26.align-rightright ul ul {   

160.   visibility: hidden;   

161.   position: absolute;   

162.   top: 0;   

163.   left: -100%;   

164.   z-index: 598;   

165.   width: 100%;   

166. }   

167. .W1-h26.align-rightright ul ul li.first {   

168.   -webkit-border-radius: 3px 0 0 0;   

169.   -moz-border-radius: 3px 0 0 0;   

170.   border-radius: 3px 0 0 0;   

171. }   

172. .W1-h26.align-rightright ul ul li.last {   

173.   -webkit-border-radius: 0 0 0 3px;   

174.   -moz-border-radius: 0 0 0 3px;   

175.   border-radius: 0 0 0 3px;   

176. }   

177. .W1-h26.align-rightright ul ul {   

178.   -webkit-border-radius: 3px 0 0 3px;   

179.   -moz-border-radius: 3px 0 0 3px;   

180.   border-radius: 3px 0 0 3px;   

181. }  

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用純css3實現的豎形二級導航”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!