简单的HTML下拉框 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             
 8             .list1 {
 9                 float:left;
10                 list-style: none;
11                 /*border: 1px solid black;*/
12                 width: 180px;
13                 height: 60px;
14                 line-height: 60px;
15                 font-size: 28px;
16                 text-align: center;
17                 border:1px #F00 dashed;
18             }
19             .list2{
20                 list-style: none;
21                 /*border: 2px solid blue;*/
22                 border-bottom: 1px solid black;
23                 position: relative;
24                 left: 60px;
25                 display: none;
26             }    
27             .list1:hover .list2{    
28                 display: block;
29             }    
30             .nav{
31                 text-align: center;
32             }
33         </style>
34     </head>
35     <body>
36         <div class="nav">
37             <ul>
38                 <li class="list1">
39                     新闻
40                     <ul>
41                         <li class="list2">国内新闻</li>
42                         <li class="list2">国外新闻</li>
43                         <li class="list2">地方新闻</li>
44                     </ul>
45                 </li>
46             </ul>
47             <ul>
48                 <li class="list1">
49                     娱乐
50                     <ul>
51                         <li class="list2">娱乐新闻</li>
52                         <li class="list2">国外新闻</li>
53                         <li class="list2">地方新闻</li>
54                     </ul>
55                 </li>
56             </ul>
57             <ul>
58                 <li class="list1">
59                     贴吧
60                     <ul>
61                         <li class="list2">贴吧新闻</li>
62                         <li class="list2">国外新闻</li>
63                         <li class="list2">地方新闻</li>
64                     </ul>
65                 </li>
66             </ul>
67             <ul>
68                 <li class="list1">
69                     北欧
70                     <ul>
71                         <li class="list2">北欧新闻</li>
72                         <li class="list2">国外新闻</li>
73                         <li class="list2">地方新闻</li>
74                     </ul>
75                 </li>
76             </ul>
77             <ul>
78                 <li class="list1">
79                     中国
80                     <ul>
81                         <li class="list2">中国新闻</li>
82                         <li class="list2">国外新闻</li>
83                         <li class="list2">地方新闻</li>
84                     </ul>
85                 </li>
86             </ul>
87         </div>
88     </body>
89 </html>

 

posted @ 2021-03-15 15:18  outsider078  阅读(241)  评论(0)    收藏  举报