<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {margin:0; padding:0}
body {width:800px; text-align:center; margin:0 auto;}
a {width:100px; display:block; border:1px dashed red; text-decoration:none}
ul,li { width:100px; margin:0; padding:0; list-style:none}
</style>
</head>
<body >
<a href="#" οnmοuseοver="show()" οnmοuseοut="hide()">栏目菜单</a>
<ul id="menu" style="display:none" οnmοuseοver="show()" οnmοuseοut="hideme()">
<li><a href="#">菜单1</a><li>
<li><a href="#">菜单2</a><li>
<li><a href="#">菜单3</a><li>
<li><a href="#">菜单4</a><li>
<li><a href="#">菜单5</a><li>
</ul>
<script>
var flag = false; //值为false表示可以隐藏
var menu = document.getElementById("menu");
//鼠标放到栏目或菜单上面都显示，并且将flag标识为true
function show(){
flag=true;
menu.style.display = 'block';
}
//离开栏目要验证一下是否可以隐藏，如果值为true则不隐藏
function hide(){
flag=false;
setTimeout(function(){
if(flag==false) {
menu.style.display = 'none';
}
},300);
}
//离开菜单本身就直接隐藏
function hideme() {
menu.style.display = 'none';
}
</script>
</body>
</html>
工作中同事要做这样的菜单功能，所以记录一下，方便以后使用！
1729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
