二级菜单效果
2016-08-30 11:18 袁叶子 阅读(152) 评论(0) 编辑 收藏 举报<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style type="text/css">
#shouye,#shouye2,#shouye3,#shouye4,#shouye5{
list-style: none;
float: left;
padding: 10px;
}
#shouyeDiv li{
list-style: none;
padding: 5px;
}
.div1{
position: relative;
}
#shouyeDiv{
position: absolute;
top: 40px;
left: 8px;
display: none;
}
</style>
</head>
<body>
<div class="div1">
<ul>
<li id="shouye">首页</li>
<li id="shouye2">时尚</li>
<li id="shouye3">女装</li>
<li id="shouye4">男装</li>
<li id="shouye5">联系我们</li>
</ul>
</div>
<div id="shouyeDiv">
<ul>
<li>首页一</li>
<li>首页二</li>
<li>首页三</li>
</ul>
</div>
<script type="text/javascript">
var shouye=document.getElementById("shouye");
var shouyeDiv=document.getElementById("shouyeDiv");
shouye.onmouseover= function () {
shouyeDiv.style.display="block";
shouye.style.color="red";
shouye.style.background="yellowgreen";
}
shouye.onmouseout=function(){
shouyeDiv.style.display="none";
shouye.style.color="black";
shouye.style.background="white";
}
</script>
</body> </html>
