1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 *{
8 margin:0;
9 padding:0;
10 }
11 a{
12 text-decoration: none;
13 border-radius: 4px;
14 }
15 ul,li{
16 list-style:none;
17 }
18 #nav{
19 width:500px;
20 height:30px;
21 margin:30px auto;
22 }
23 .nav1{
24 position:relative;
25 }
26 .nav1>li{
27 float: left;
28 }
29 .nav1>li>a{
30 display:block;
31 width:98px;
32 height:28px;
33 border:1px solid #f1edee;
34 color:#34312a;
35 text-align:center;
36 line-height:28px;
37 background:#fe0000;
38 }
39 .nav2{
40 display:none;
41 position:absolute;
42 }
43 .nav2>li{
44 position:relative;
45 }
46 .nav2>li>a{
47 display:block;
48 width:98px;
49 height:28px;
50 border:1px solid #f1edee;
51 color:#34312a;
52 text-align:center;
53 line-height:28px;
54 background:#0000fe;
55 }
56 .nav1>li:hover .nav2{
57 display:block;
58 }
59 .nav3{
60 display:none;
61 position:absolute;
62 left:100px;
63 }
64 .nav3>li>a{
65 display:block;
66 width:98px;
67 height:28px;
68 border:1px solid #f1edee;
69 color:#34312a;
70 text-align:center;
71 line-height:28px;
72 background:#ffc0cb;
73 }
74 li:hover>a{
75 background:#ffff01;
76 }
77 .nav2>li:hover .nav3{
78 display:block;
79 }
80 </style>
81 </head>
82 <body>
83 <div id="nav">
84 <ul class="nav1">
85 <li>
86 <a href="#">一级导航</a>
87 <ul class="nav2">
88 <li>
89 <a href="#">二级导航</a>
90 <ul class="nav3">
91 <li><a href="">三级导航</a></li>
92 <li><a href="">三级导航</a></li>
93 <li><a href="">三级导航</a></li>
94 </ul>
95 </li>
96 <li>
97 <a href="#">二级导航</a>
98 <ul class="nav3">
99 <li><a href="">三级导航</a></li>
100 <li><a href="">三级导航</a></li>
101 <li><a href="">三级导航</a></li>
102 </ul>
103 </li>
104 <li>
105 <a href="#">二级导航</a>
106 <ul class="nav3">
107 <li><a href="">三级导航</a></li>
108 <li><a href="">三级导航</a></li>
109 <li><a href="">三级导航</a></li>
110 </ul>
111 </li>
112 </ul>
113 </li>
114 <li>
115 <a href="#">一级导航</a>
116 <ul class="nav2">
117 <li>
118 <a href="#">二级导航</a>
119 <ul class="nav3">
120 <li><a href="">三级导航</a></li>
121 <li><a href="">三级导航</a></li>
122 <li><a href="">三级导航</a></li>
123 </ul>
124 </li>
125 <li>
126 <a href="#">二级导航</a>
127 <ul class="nav3">
128 <li><a href="">三级导航</a></li>
129 <li><a href="">三级导航</a></li>
130 <li><a href="">三级导航</a></li>
131 </ul>
132 </li>
133 <li>
134 <a href="#">二级导航</a>
135 <ul class="nav3">
136 <li><a href="">三级导航</a></li>
137 <li><a href="">三级导航</a></li>
138 <li><a href="">三级导航</a></li>
139 </ul>
140 </li>
141 </ul>
142 </li>
143 <li>
144 <a href="#">一级导航</a>
145 <ul class="nav2">
146 <li>
147 <a href="#">二级导航</a>
148 <ul class="nav3">
149 <li><a href="">三级导航</a></li>
150 <li><a href="">三级导航</a></li>
151 <li><a href="">三级导航</a></li>
152 </ul>
153 </li>
154 <li>
155 <a href="#">二级导航</a>
156 <ul class="nav3">
157 <li><a href="">三级导航</a></li>
158 <li><a href="">三级导航</a></li>
159 <li><a href="">三级导航</a></li>
160 </ul>
161 </li>
162 <li>
163 <a href="#">二级导航</a>
164 <ul class="nav3">
165 <li><a href="">三级导航</a></li>
166 <li><a href="">三级导航</a></li>
167 <li><a href="">三级导航</a></li>
168 </ul>
169 </li>
170 </ul>
171 </li>
172 <li>
173 <a href="#">一级导航</a>
174 <ul class="nav2">
175 <li>
176 <a href="#">二级导航</a>
177 <ul class="nav3">
178 <li><a href="">三级导航</a></li>
179 <li><a href="">三级导航</a></li>
180 <li><a href="">三级导航</a></li>
181 </ul>
182 </li>
183 <li>
184 <a href="#">二级导航</a>
185 <ul class="nav3">
186 <li><a href="">三级导航</a></li>
187 <li><a href="">三级导航</a></li>
188 <li><a href="">三级导航</a></li>
189 </ul>
190 </li>
191 <li>
192 <a href="#">二级导航</a>
193 <ul class="nav3">
194 <li><a href="">三级导航</a></li>
195 <li><a href="">三级导航</a></li>
196 <li><a href="">三级导航</a></li>
197 </ul>
198 </li>
199 </ul>
200 </li>
201 <li>
202 <a href="#">一级导航</a>
203 <ul class="nav2">
204 <li>
205 <a href="#">二级导航</a>
206 <ul class="nav3">
207 <li><a href="">三级导航</a></li>
208 <li><a href="">三级导航</a></li>
209 <li><a href="">三级导航</a></li>
210 </ul>
211 </li>
212 <li>
213 <a href="#">二级导航</a>
214 <ul class="nav3">
215 <li><a href="">三级导航</a></li>
216 <li><a href="">三级导航</a></li>
217 <li><a href="">三级导航</a></li>
218 </ul>
219 </li>
220 <li>
221 <a href="#">二级导航</a>
222 <ul class="nav3">
223 <li><a href="">三级导航</a></li>
224 <li><a href="">三级导航</a></li>
225 <li><a href="">三级导航</a></li>
226 </ul>
227 </li>
228 </ul>
229 </li>
230 </ul>
231 </div>
232 </body>
233 </html>
Why do you work so hard？
Because the things I want to buy are expensive
and the places I want to go are far away.
The person I like is very excellent.