1 <!DOCTYPE HTML>
2 <html lang="en-US">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <style type="text/css" >
9 .menu{
10 margin:0px auto;
11 width:404px;
12 height:21px;
13 }
14 .menu ul{
15 margin:0px;
16 padding:0px;
17 }
18 .menu ul li{
19 position:relative;
20 float:left;
21 list-style:none;
22 padding:2px;
23 border:1px dotted;
24 font-size:14px;
25 width:95px;
26 text-align: center;
27 margin:0px;
28 background:#999999;
29 }
30 .menu ul li ul{
31 display:none;
32 }
33 .menu ul li:hover ul{
34 display:block;
35 position: absolute; left: 0px; top: 21px;
36 }
37 </style>
38 <body>
39 <p>下面是一个导航条
</p>
40 <div class="menu">
41 <ul>
42 <li><a href="#">首页
</a></li>
43 <li>
44 <a href="#">新闻中心
</a>
45 <ul>
46 <li><a href="1#">新手入门
</a></li>
47 <li><a href="2#">视频教程
</a></li>
48 <li><a href="3#">常见问题
</a></li>
49 </ul>
50 </li>
51 <li>
52 <a href="#">学习课程
</a>
53 <ul>
54 <li><a href="1#">新手入门
</a></li>
55 <li><a href="2#">视频教程
</a></li>
56 <li><a href="3#">常见问题
</a></li>
57 </ul>
58 </li>
59 <li><a href="#">联系我们
</a></li>
60 </ul>
61 </div>
62 </body>
63 </html>
转载于:https://www.cnblogs.com/lizhaoyao/p/5332679.html
相关资源：js鼠标滑过显示横向二级导航菜单代码
