标签：
最近在看视频学习做一些HTML+JS+CSS的实例，第一个是实现下拉菜单。
5.7
制作的思路是：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>
2016-05-08 22:40:08
今天用的实JavaScript方法来实现下拉菜单，主要使用到的实onmouseover事件、onmouseout事件，function定义函数
写下来我最大的心得是，使用css只用一行代码就可以实现了，但是JavaScript的工作量却大得多，所以可能在实际中是下拉菜单这种比较简单的工作，还是适合用css来实现。并且看了一下老师的代码，觉得有很多地方有点随意，不是太规范，不太适合初学者，一般都会使用id或者class来获取元素。
标签：
原文地址：http://www.cnblogs.com/darthbadwolf/p/5472033.html
