二级JS下拉菜单实例代码

发布时间:2020-08-19编辑:脚本学堂
分享一个js下拉菜单代码,二级js下拉菜单的例子,js与css实现的下拉菜单效果,感兴趣的朋友参考下。

js实现多级下拉菜单的效果,js二级下拉菜单。

代码:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>javascript下拉菜单</title>  
<style type="text/css">  
 * {  
 padding:0;   
 margin:0;  
 }  
 body {  
 font-family:verdana, sans-serif;   
 font-size:small;  
 }  
 #navigation, #navigation li ul {  
 list-style-type:none;  
 }  
 #navigation {  
 margin:20px;  
 }  
 #navigation li {  
 float:left;  
 text-align:center;  
 position:relative;  
 }  
 #navigation li a:link, #navigation li a:visited {  
 display:block;   
 text-decoration:none;   
 color:#000;   
 width:120px;   
 height:40px;   
 line-height:40px;   
 border:1px solid #fff;   
 border-width:1px 1px 0 0;   
 background:#c5dbf2;   
 padding-left:10px;   
 }  
 #navigation li a:hover {  
 color:#fff;  
 background:#2687eb;  
 }  
 #navigation li ul li a:hover {  
 color:#fff;  
 background:#6b839c;   
 }  
 #navigation li ul {  
 display:none;  
 position:absolute;   
 top:40px;  
 left:0;  
 margin-top:1px;  
 width:120px;  
 }  
 #navigation li ul li ul {  
 display:none;  
 position:absolute;   
 top:0px;  
 left:130px;   
 margin-top:0;  
 margin-left:1px;  
 width:120px;  
 }  
    </style>  
    <script type="text/javascript">  
 function displaySubMenu(li) {  
 var subMenu = li.getElementsByTagName("ul")[0];  
 subMenu.style.display = "block";  
 }  
 function hideSubMenu(li) {  
 var subMenu = li.getElementsByTagName("ul")[0];  
 subMenu.style.display = "none";  
 }  
    </script>  
</head>  
<body>  
    <ul id="navigation">  
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
 <a href="#">栏目1</a>      
 <ul>  
 <li><a href="#">栏目1->菜单1</a></li>  
 <li><a href="#">栏目1->菜单2</a></li>  
 <li><a href="#">栏目1->菜单3</a></li>  
 <li><a href="#">栏目1->菜单4</a></li>  
 </ul>  
 </li>  
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
 <a href="#">栏目2</a>      
 <ul>  
 <li><a href="#">栏目2->菜单1</a></li>  
 <li><a href="#">栏目2->菜单2</a></li>  
 <li><a href="#">栏目2->菜单3</a></li>  
 <li><a href="#">栏目2->菜单4</a></li>  
 <li><a href="#">栏目2->菜单5</a></li>  
 </ul>  
 </li>  
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
 <a href="#">栏目3</a>      
 <ul>  
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
 <a href="#">栏目3->菜单1</a>  
 <ul>  
 <li><a href="#">菜单1->子菜单1</a></li>  
 <li><a href="#">菜单1->子菜单2</a></li>  
 <li><a href="#">菜单1->子菜单3</a></li>  
 <li><a href="#">菜单1->子菜单4</a></li>  
 </ul>  
 </li>  
 <li><a href="#">栏目3->菜单2</a></li>  
 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">  
 <a href="#">栏目3->菜单3</a>  
 <ul>  
 <li><a href="#">菜单3->子菜单1</a></li>  
 <li><a href="#">菜单3->子菜单2</a></li>  
 <li><a href="#">菜单3->子菜单3</a></li>  
 </ul>  
 </li>  
 </ul>  
 </li>  
    </ul>  
</body>  
</html>

效果图:
js下拉菜单 二级联动下拉菜单