<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="Menu.css" type="text/css"></link>
<script language="javascript" type="text/javascript">
function Show(val){
if(val=="menu"){
document.getElementById("menu").style.display="block";
}
}
function Close(val){
if(val=="menu"){
document.getElementById("menu").style.display="none";
}
}
</script>
</head>
<body>
<div class="all">
<ul>
<li onmouseover="Show('menu')" onmousemove="Close('menu')"><a href="#" ></a>菜单</li>
<li><table class="menu" id="menu">
<tr><td><ul><li><a href="#"></a>注册</li>
<li><a href="#"></a>登入</li>
<li><a href="#"></a>监测</li></ul></td></tr>
</table>
</li>
</ul>
</div>
</body>
</html>
.all{
width:100px;
background-color: gray;
border: 2px solid blue;
text-align: center;
}.all ul{
list-style-type: none;
padding: 0;
margin: 0;
}.menu {
display: none;
}弹出的窗口为何只是闪出来一下就没了
<html>
<head>
<title>Menu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="Menu.css" type="text/css"></link>
<script language="javascript" type="text/javascript">
function Show(val){
if(val=="menu"){
document.getElementById("menu").style.display="block";
}
}
function Close(val){
if(val=="menu"){
document.getElementById("menu").style.display="none";
}
}
</script>
</head>
<body>
<div class="all">
<ul>
<li onmouseover="Show('menu')" onmousemove="Close('menu')"><a href="#" ></a>菜单</li>
<li><table class="menu" id="menu">
<tr><td><ul><li><a href="#"></a>注册</li>
<li><a href="#"></a>登入</li>
<li><a href="#"></a>监测</li></ul></td></tr>
</table>
</li>
</ul>
</div>
</body>
</html>
.all{
width:100px;
background-color: gray;
border: 2px solid blue;
text-align: center;
}.all ul{
list-style-type: none;
padding: 0;
margin: 0;
}.menu {
display: none;
}弹出的窗口为何只是闪出来一下就没了
解决方案 »
- 哪位调通过 jsocket + php 啊???分享下咯!!!!!!
- 用js脚本获取运行服务器上的EXE文件?
- 怎么没有格行变色呢?
- js验证日期问题
- Ajax同时执行两个request数据丢失问题
- 为什么给动态创建的TD指定onclick事件不起作用呢????????
- 关于鼠标悬浮在td上,即更换表格错误,谢谢!
- IE6下,javascript控制input获取焦点时突出显示,异常
- 谁能讲讲vbscript与javascript有何本质区别呀?
- new FormData()有人用过吗?
- 哪位大神帮我看看,一个javascript正则表达式分组问题,我已经弄了两天了,谢谢了
- Chrome扩展之content_scripts的执行时刻???
这个是什么情况?是不是第二个要写成onmouseout
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
.menu{width:100%;}
.menu ul{float:left;list-style:none;width:100%;}
.menu li{float:left;list-style:none;text-align:left;margin-left:10px;width:106px;height:20px;position:relative;}
.menu li span{float:left;width:60px;display:none;background:#fff; position:absolute;border:1px solid #bfbfbf;left:-15px;top:20px;/*因为position的定义,实际上该区域原点仍为父级标签的原点,因此设置一个top偏离*/}
.menu li span a{float:left;width:100%;color: #4454AB;text-align:center;height:28px;line-height:28px;text-decoration:none;}
.menu li span a:hover{color: #ff9900;}
</style>
<script type="text/javascript">function MenuEventListen(){
var _menu=document.getElementById("menu");
var _li=_menu.getElementsByTagName("li");
for(i=0;i<_li.length;i++)
{
_li[i].onmouseover=function(){
this.getElementsByTagName('span')[0].style.display='block';
};
_li[i].onmouseout=function(){
this.getElementsByTagName('span')[0].style.display='none';
};
}
}
window.onload=function(){
MenuEventListen();
}
</script>
</head>
<body>
<div id="menu" class="menu">
<ul>
<li>
<a href="#">菜单</a>
<span><a href="#">注册</a><a href="#">登入</a><a href="#">监测</a></span>
</li> </ul>
</div> <div>这里是其他内容,这里是其他内容</div>
</body>
</html>