JS三级下拉导航菜单
效果展示：代码：<!DOCTYPE html PUBLIC "- W3C DTD XHTML 1 0 Transitional EN" "http: www w3 org TR xhtml1 DTD xhtml1-
天晟网 小编在整理编程教程 > JavaScript > 看到JS三级下拉导航菜单，下面是小编47为您找到的38057相关内容，希望47对您有帮助。
效果展示：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS三级下拉导航菜单 免费教程 www.timsion.com</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>
转载文章请标明来自天晟网 - Timsion.com > 编程教程 > JavaScript >
标题：JS三级下拉导航菜单
网址：http://www.timsion.com/javas/38057.html
上一篇：JS随机漂浮广告代码
下一篇：JS实现手机站自动跳转的方法
免责声明：以上内容来自互联网和用户投稿，不代表本站的观点和立场，版权归原作者所有，如有侵权，请与我们联系。