1 <style type="text/css">
2 *{padding: 0px;margin: 0px;}
3 #nav{width: 100%;background-color: blue ;height: 40px;color: white;font-size: 18px;margin-top: 120px;}
4 #nav ul{list-style-type: none;}
5 #nav #myul{width:1200px ; height: 40px;margin:0px auto;}
6 #nav #myul li{float: left;}
7 #nav #myul li a{display:block;width: 120px;line-height:40px;height: 40px;color: #fff;text-align:center;
8 text-decoration: none;font-family: "微软雅黑";font-size: 12pt; }
9 #nav #myul li a:hover{background-color: #66c;color:000;}
10 #nav #myul li ul li{clear:both;}
11 #nav #myul li ul{display: none;}
12 #nav #myul li:hover ul{display: block;}
13 #nav #myul li ul li a{background-color: blue;}
14 </style>
15 </head>
16 <body>
17 <div id="nav">
18 <ul id="myul">
19 <li><a href="#">魅力苏州</a>
20 <ul>
21 <li><a href="#">苏州文化</a></li>
22 <li><a href="#">苏州历史</a></li>
23 <li><a href="#">苏州人文</a></li>
24 <li><a href="#">苏州景象</a></li>
25 </ul>
26 </li>
27 <li><a href="#">美在苏州</a>
28 <ul>
29 <li><a href="#">苏州文化</a></li>
30 <li><a href="#">苏州历史</a></li>
31 <li><a href="#">苏州人文</a></li>
32 <li><a href="#">苏州景象</a></li>
33 </ul>
34 </li>
35 <li><a href="#">吃在苏州</a>
36 <ul>
37 <li><a href="#">苏州文化</a></li>
38 <li><a href="#">苏州历史</a></li>
39 <li><a href="#">苏州人文</a></li>
40 <li><a href="#">苏州景象</a></li>
41 </ul>
42 </li>
43 </ul>
44 </div>
