最近在看視頻學習做一些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來實現。