首页 > 代码库 > CSS 实现样式下拉菜单

CSS 实现样式下拉菜单

2024-08-12 21:09:18   218人阅读

下拉菜单的实现

脚本：

技术分享
 1 <script type="text/javascript"> 2         function ShowSub(li) { 3             var subMenu = li.getElementsByTagName("ul")[0]; ; 4             subMenu.style.display = "block"; 5         } 6         function HideSub(li) { 7             var subMenu = li.getElementsByTagName("ul")[0]; 8             subMenu.style.display = "none"; 9         }10     </script>
View Code

CSS代码：

技术分享
1 *{ margin:0px; padding:0px;}2  #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}3  ul{ list-style:none;}4  ul li{ line-height:40px; text-align:center; position:relative; float:left; }5  a{ text-decoration:none; color:#000; display:block; width:90px;}6  a:hover{ color:#FFF; background-color:#666;}7  ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 8  ul li ul{width:90px; position:absolute;display:none; }9  ul li:hover ul{display:block;}
View Code

页面HTML代码：

技术分享
 1 <div id="menu"> 2 <ul> 3   <li><a href=http://www.mamicode.com/"#">首页</a></li> 4   <li><a href=http://www.mamicode.com/"#">课程大厅</a> 5     <ul> 6       <li><a href=http://www.mamicode.com/"#">Javascript</a></li> 7       <li><a href=http://www.mamicode.com/"#">jQuery</a></li> 8     </ul> 9   </li>10   <li><a href=http://www.mamicode.com/"#">学习中心</a>11     <ul>12       <li><a href=http://www.mamicode.com/"#">视频学习</a></li>13       <li><a href=http://www.mamicode.com/"#">案例学习</a></li>14       <li><a href=http://www.mamicode.com/"#">交流平台</a></li>15     </ul>16   </li>17   <li><a href=http://www.mamicode.com/"#">经典案例</a></li>18   <li><a href=http://www.mamicode.com/"#">关于我们</a></li>19   <li><a href=http://www.mamicode.com/"#">联系我们</a></li>20 </ul>21 </div>
View Code

代码效果：

技术分享

 

CSS 实现样式下拉菜单


联系
我们