HTML+CSS入门实现下拉菜单详解-职坐标

HTML+CSS入门实现下拉菜单详解

沉沙 2018-08-21 来源：阅读 600 评论 0

摘要：本篇教程介绍了HTML+CSS入门实现下拉菜单详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门实现下拉菜单详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

制作的思路是：1.静态网页的制作 2.动态特效实现菜单的显示和隐藏（三种方法：css、JavaScript、jQuery） 3.浏览器的兼容问题（低版本IE可能不支持等）
在用css实现时，由于盒子模型有自己默认的margin和padding值，所以要reset。
有一点比较有疑问的实，老师在视频里说position:absolute要和left、top同时使用。这是为什么？在实现的时候，我并没有使用left和top但是效果却是一样的。
要在二级菜单变化的时候，一级菜单不受影响。
隐藏下拉菜单 display:none
我的代码：

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>Document</title>
6     <style type="text/css">
7         *{
8             margin: 0;
9             padding: 0;
10         }
11
12         #nav{
13             background-color: #eee;
14             width: 600px;
15             height: 40px;
16             margin: 0 auto;
17         }
18
19         ul{
20             list-style: none;
21         }
22
23         ul li{
24             float: left;
25             line-height: 40px;
26             text-align: center;
27         }
28         a{
29             text-decoration: none;
30             color: black;
31             display: block;
32             padding: 0 10px;
33         }
34         a:hover{
35             color: #fff;
36             background-color: #666
37         }
38
39         ul li ul li{
40             float: none;
41             background-color: #eee;
42             margin-top: 2px;
43         }
44
45         ul li ul{
46             position: absolute; /*二级菜单变化时，一级菜单不受影响*/
47             display: none; /*隐藏二级菜单*/
48         }
49
50         ul li ul li a:hover{
51             background-color: #06f;
52
53         }
54
55         ul li:hover ul{
56             display: block; /*鼠标经过时显示二级菜单*/
57         }
58
59     </style>
60 </head>
61 <body>
62     <div id="nav">
63         <ul>
64             <li><a href="#">home</a></li>
65             <li><a href="#">star wars</a>
66                 <ul>
67                     <li><a href="#">darth vader</a></li>
68                     <li><a href="#">luke</a></li>
69                 </ul>
70             </li>
71             <li><a href="#">doctor who</a>
72                 <ul>
73                     <li><a href="#">10th</a></li>
74                     <li><a href="#">11th</a></li>
75                 </ul>
76             </li>
77             <li><a href="#">the matrix</a></li>
78             <li><a href="#">about us</a></li>
79         </ul>
80     </div>
81 </body>
82 </html>