1. 程式人生 > >jQuery --下拉菜單的顯示與隱藏

jQuery --下拉菜單的顯示與隱藏

relative ldr src auto children oct code wid play

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         
 7         <style type="text/css">
 8             *{
 9                 margin: 0px;
10                 padding: 0px;
11             }
12             #nav{
13 background-color: #EEE; 14 width: 400px; 15 height: 40px; 16 margin: 0 auto; 17 } 18 ul{ 19 list-style: none; 20 } 21 ul li{ 22 float: left; 23 padding: 0 0;
24 line-height: 40px; 25 text-align: center; 26 position: relative; 27 } 28 a{ 29 text-decoration: none; 30 color: #000000; 31 display: block; 32 padding: 0 10px; 33 }
34 a:hover{ 35 color: #FFF; 36 background-color:#666666; 37 } 38 ul li ul li{ 39 float: none; 40 background-color: #EEE; 41 margin-top: 2px; 42 } 43 ul li ul{ 44 position: absolute; 45 left: 0px ; 46 top: 40px; 47 display: none; 48 49 } 50 </style> 51 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 52 <script> 53 $(function(){ 54 $(‘.navmenu‘).mousemove(function(){ 55 $(this).children(‘ul‘).show(); 56 }); 57 $(‘.navmenu‘).mouseout(function(){ 58 $(this).children(‘ul‘).hide(); 59 }); 60 }); 61 </script> 62 </head> 63 <body> 64 <div id="nav"> 65 <ul> 66 <li class="navmenu"><a href="#">首頁</a></li> 67 <li class="navmenu"><a href="#">課程大廳</a> 68 <ul> 69 <li><a href="#">jQuery</a></li> 70 <li><a href="#">javaScript</a></li> 71 </ul> 72 </li> 73 <li><a href="#">學習中心</a></li> 74 <li><a href="#">經典案例</a></li> 75 <li><a href="#">關於我們</a></li> 76 </ul> 77 </div> 78 </body> 79 </html>

技術分享圖片

jQuery --下拉菜單的顯示與隱藏