<!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;
}弹出的窗口为何只是闪出来一下就没了

解决方案 »

  1.   

    <li onmouseover="Show('menu')" onmousemove="Close('menu')">
    这个是什么情况?是不是第二个要写成onmouseout
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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>
      

  3.   

     <li onmouseover="Show('menu')" onmouseout="Close('menu')"><a href="#" ></a>菜单</li>
      

  4.   

    onmouseover跟onmousemove已经发生冲突,onmouseover是指当鼠标经过元素之上,而onmousemove是指当鼠标在某元素上经过,他们之间的主要区别是前者是短暂性事件,后者是连续性事件,但你鼠标从菜单移动时就已经触发了onmouseover。方法是按上面的人回复去改,应该没问题
      

  5.   

    感谢4楼,是我对onmouseover、onmousemove、onmouseout这几个没有真正的理解。刚刚认真的去看了下帮助文档,受教了。