最简单的二级菜单代码如下:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style>
*{padding: 0;margin: 0;list-style:none;}
.banner{width:1200px;height:500px;margin:50px auto;position:relative;}
.banner img{width: 100%;height: 100%;}
.nav{position:absolute;top:0;}
.nav li{width: 240px;height: 50px;background:rgba(0,0,0,0.5);text-align:center;line-height: 50px;color:#fff;}
.box li{width: 960px;height: 500px;background:#fff;border-top:1px solid #ccc;box-shadow:0px 1px 1px #ccc;position:absolute;left:240px;top:0;display:none;}
</style>
</head>
<body>
<div class="banner"><img src="https://i1.mifile.cn/a4/xmad_15311087505587_ZrTIc.jpg" alt="" />
<ul class="nav">
<li>小米手机1</li>
<li>小米手机2</li>
<li>小米手机3</li>
<li>小米手机4</li>
<li>小米手机5</li>
<li>小米手机6</li>
<li>小米手机7</li>
<li>小米手机8</li>
<li>小米手机9</li>
<li>小米手机10</li>
</ul>
<ul class="box">
<li>盒子1</li>
<li>盒子2</li>
<li>盒子3</li>
<li>盒子4</li>
<li>盒子5</li>
<li>盒子6</li>
<li>盒子7</li>
<li>盒子8</li>
<li>盒子9</li>
<li>盒子10</li>
</ul>
</div>
</body>
<script>
var nav=document.getElementsByClassName("nav")
var btn=nav[0].getElementsByTagName("li")
var box=document.getElementsByClassName("box")
var btns=box[0].getElementsByTagName("li")
for(var i=0;i<btn.length;i++){
btn[i].index=i
btn[i].onmouseenter=function(){
for(var i=0;i<btn.length;i++){
btn[i].style.background="rgba(0,0,0,0.5)"
btns[i].style.display="none"
}
this.style.background="orange"
btns[this.index].style.display="block"
}
btn[i].onmouseleave=function(){
for(var i=0;i<btn.length;i++){
btn[i].style.background="rgba(0,0,0,0.5)"
btns[i].style.display="none"
}
btns[this.index].style.display="none"
}
btns[i].onmouseenter=function(){
this.style.display="block"
}
}
</script>
</html>