下拉式菜单

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10 
11         }
12         #menu{
13             background: #27AE60;/*中绿色*/
14             height: 65px;
15         }
16         #menu ul li{
17             list-style: none;
18             display: block;
19             float: left;
20             border-right: 1px solid rgba(255,255,255,.3);
21             position: relative;
22         }
23         #menu ul li a{
24             display: block;
25             padding: 0 35px;
26             line-height: 65px;
27             font-size:21px;
28             color: #FFF;
29             text-decoration: none;
30         }
31         #menu ul li ul{
32             display: none;
33             position:absolute;
34             top: 65px;
35             background:#2ECC71;
36 
37         }
38         #menu ul li:hover ul{
39             display: block;
40         }
41         #menu ul li ul li{
42             width: 100%;
43             border-right: 0;
44             border-top:1px solid rgba(255,255,255,.3) ;
45 
46         }
47         #menu ul li ul li a{
48             font-size:18px;
49             line-height: 50px;
50         }
51         #menu ul li:hover{
52             background: rgba(0,0,0,.2);
53         }
54     </style>
55 </head>
56 <body>
57 <nav id="menu">
58     <ul>
59         <li ><a href="">Home</a></li>
60         <li ><a href="">News</a>
61             <ul>
62                 <li ><a href="">Sports</a></li>
63                 <li ><a href="">Weather</a></li>
64                 <li ><a href="">Finance</a></li>
65 
66             </ul>
67         </li>
68         <li ><a href="">Products</a>
69             <ul>
70                 <li ><a href="">Construction</a></li>
71                 <li ><a href="">Machinery</a></li>
72                 <li ><a href="">Compressor</a></li>
73                 <li ><a href="">Vehicle</a></li>
74             </ul>
75 
76         </li>
77 
78         <li ><a href="">Services</a></li>
79         <li ><a href="">Contatct</a></li>
80 
81     </ul>
82 
83 </nav>
84 </body>
85 </html>
猜你喜欢
