HTML中⽤js制作三级下拉菜单HTML中⽤jst制作三级下拉菜单（先⽔平再垂直）
菜鸟版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>javascript制作三级下拉菜单</title>
</head>
<style>
*{
padding: 0px;
margin: 0px;
}
header{
background-color: #ff9900;
width: 100%;
height: 100px;
margin-bottom: 5px;
position: relative;
}
nav{
left:160px;
background-color: yellowgreen;
font-weight: bold;
bottom: 5px;
position: absolute;
}
ul{
list-style: none;
}
ul li{
float: left;
position: relative;
}
a{
height: 40px;
line-height: 40px;
width: 100px;
text-decoration: none;
display: block;
background-color: yellow;
text-align: center;
padding: 0px 10px;
border: 1px solid white;
border: 1px solid white;
}
a:hover{
background-color: green;
}
ul li ul{
position: absolute;
display: none;
}
ul li ul li{
float: none;
width: 100px;
}
ul li ul li ul{
position: absolute;
left: 121px;/*这⾥为什么要⽤121px⽽不是101px*/
top: 0px;
display: none;
z-index: 1;
}
ul li ul li ul li{
float: none;
}
</style>
<body>
<header>
<nav>
<ul>
<li><a href="#">Demons</a></li>
<li><a href="#">Faded</a></li>
<li onmouseover="showmenu1(this)"onmouseout="hidemenu1(this)"><a href="#">Heartbeat</a>
<ul>
<li><a href="#">Good Time</a></li>
<li><a href="#">Only one</a></li>
<li onmouseover="showmenu2(this)"onmouseout="hidemenu2(this)"><a href="#">Attention</a>
<ul>
<li><a href="#">Alone</a></li>
<li><a href="#">Skin</a></li>
<li><a href="#">Hero</a></li>
<li><a href="#">Monody</a></li>
<li><a href="#">Closer</a></li>
</ul>
</li>
<li><a href="#">Monsters</a></li>
html下拉菜单的制作方法<li><a href="#">Clarity</a></li>
</ul>
</li>
<li><a href="#">Arigato</a></li>
<li><a href="#">Stay</a></li>
</ul>
</nav>
</header>
</body>
<script>
function showmenu1(obj){
var ElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidemenu1(out){
var ElementsByTagName("ul")[0];
submenu.style.display="none";
}
function showmenu2(obj){
var ElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidemenu2(out){
var ElementsByTagName("ul")[0];
submenu.style.display="none";
}
</script>
</script> </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。