html页面：
View Code
1
2 <!doctype html>
3 <title>纯CSS多级菜单by 司徒正美</title>
4 <meta charset="utf-8"/>
5 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" />
6 <meta name="description" content="纯CSS多级菜单 by 司徒正美" />
7 </head>
8 <body>
9 <style type="text/css">
10 * {
11 margin:0;
12 padding:0;
13 }
14 .menu {
15 font-size:12px;
16 }
17 .menu li {/*水平菜单*/
18 float:left;
19 list-style:none;
20 position:relative;/*把包含块移动li元素*/
21 }
22 .menu a {
23 display:block;
24 height:32px;
25 width:100px;
26 line-height:32px;
27 background:#a9ea00;
28 color:#ff8040;
29 text-decoration:none;
30 text-align:center;
31 overflow:hidden;/*★★★★*/
32 }
33 .menu a:hover {
34 background:#369;
35 color:#fff;
36 }
37 /*新增的二级菜单部分*/
38 .menu ul ul {
39 visibility:hidden;/*隐藏所有子菜单（二级的三级）*/
40 position:absolute;
41 left:0px;
42 top:32px;
43 }
44 /*指定是显示二级子菜单*/
45 .menu ul li:hover ul.second,/*非IE6*/
46 .menu ul a:hover ul.second{/*IE6*/
47 visibility:visible;
48 }
49
50 .menu ul ul li {
51 clear:both;/*垂直显示*/
52 text-align:left;
53 }
54 .menu .third,.menu .fourth{
55 top:0px;/*重设子菜单相对于包含块哪个位置出现*/
56 left:100px;
57 }
58 /*指定是显示三级子菜单*/
59 .menu ul ul li:hover ul.third,
60 .menu ul ul a:hover ul.third{
61 visibility:visible;
62 }
63 /*指定是显示三级子菜单*/
64 .menu ul ul ul li:hover ul.fourth,
65 .menu ul ul ul a:hover ul.fourth{
66 visibility:visible;
67 }
68 /*重设子菜单在鼠标滑过时的样式，有多少个ul就表明当前是多少级子菜单*/
69 /*二级子菜单*/
70 .menu ul ul a:hover{
71 background:black;
72 color:white;
73 }
74 /*三级子菜单*/
75 .menu ul ul ul a:hover{
76 background:#B45B3E;
77 color:white;
78 }
79 .menu ul ul ul ul a:hover{
80 background:#FFE8AA;
81 color:#68DFFB;
82 }
83 .menu table {
84 border:1px solid aqua;
85 }
86 .menu table td{
87 border:1px solid aqua;
88 }
89 </style>
90 <h1>这是可是四级菜单哦！</h1>
91 <div class="menu">
92 <ul>
93 <li>
94 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
95 <a href="http://www.cnblogs.com/rubylouvre/">菜单一</a>
96 <ul class="second">
97 <li>
98 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
99 <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a>
100 <ul class="third">
101 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_11</a></li>
102 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_12</a></li>
103 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_13</a></li>
104 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_14</a></li>
105 </ul>
106 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
107 </li>
108 <li>
109 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
110 <a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a>
111 <ul class="third">
112 <li>
113 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
114 <a href="http://www.cnblogs.com/rubylouvre/">三级菜单_21</a>
115 <ul class="fourth">
116 <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_31</a></li>
117 <li><a href="http://www.cnblogs.com/rubylouvre/">四级菜单_32</a></li>
118 </ul>
119 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
120 </li>
121 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_22</a></li>
122 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_23</a></li>
123 <li><a href="http://www.cnblogs.com/rubylouvre/">三级菜单_24</a></li>
124 </ul>
125 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
126 </li>
127 </ul>
128 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
129 </li>
130 <li>
131 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
132 <a href="http://www.cnblogs.com/rubylouvre/">菜单二</a>
133 <ul class="second">
134 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li>
135 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li>
136 </ul>
137 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
138 </li>
139 <li>
140 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
141 <a href="http://www.cnblogs.com/rubylouvre/">菜单三</a>
142 <ul class="second">
143 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_31</a></li>
144 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_32</a></li>
145 </ul>
146 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
147 </li>
148 <li>
149 <!--[if lte IE 6]><a href=""><table><tr><td><![endif]-->
150 <a href="http://www.cnblogs.com/rubylouvre/">菜单四</a>
151 <ul class="second">
152 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_41</a></li>
153 <li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_42</a></li>
154 </ul>
155 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
156 </li>
157 </ul>
158 </div>
159 </body>
160 </html>