三级菜单 

  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>

 

posted @ 2019-01-12 15:40  元哥0317  阅读(166)  评论(0)  编辑  收藏  举报