一个导航菜单的问题，请教一下各位大师

各位大师，小弟在写一个导航菜单时，出现一个问题，一直搞不清楚，当我把鼠标划过菜单时，他的子菜单会显示出来，但是我想点这个子菜单却点不到，原因是因为我划出菜单时，子菜单会隐藏，我就不知道，怎么样当我鼠标划过菜单时可以显示子菜单，同时可以点击子菜单，而划出菜单时又能隐藏子菜单。下面是我自己写的代码，谁能告诉我一下，问题原因所在。谢谢各位大师。<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
</head>
<style>
* {
margin:0px;
padding:0px;
}
#menu {
width:800px;
height:30px;
margin:60px auto;
background:#F00;
}
#menu ul {
list-style:none;
}
#menu ul li {
float:left;
position:relative;
margin:0px 10px;
}
#menu ul li a {
text-decoration:none;
color:#FFF;
display:block;
width:100px;
height:30px;
text-align:center;
line-height:30px;
}#menu ul li a:hover{
background:#000;}
#menu ul li ul {
position:absolute;
width:100px;
top:30px;
left:0px;
display:none;
}
#menu ul li ul li {
width:100px;
height:20px;
text-align:center;
float:left;
margin:0px;
line-height:20px;
border-bottom:#333 solid 1px;
}
#menu ul li ul li a { margin:0px;
text-align:center;
text-decoration:none;
color:#FFF;
background:#F00;
font-size:12px;
width:100px;
height:20px;
line-height:20px;}#menu ul li ul li a:hover { background:#333; color:#fff;}
)
</style>
<script type="text/javascript" language="javascript" src="../菜单/js/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(function (){

$("#menu a").click(function (){
$(this).next().show();
});
$("#menu a").mousedown(function (){
$(this).next().css("display","block");
});


$("#menu a").mouseout(function (){
$(this).next().css("display","none");

});
});</script>
<body>
<div id="menu">
  <ul>
    <li><a href="#">首页</a> </li>
    <li><a href="#">企业简介</a>
      <ul >
        <li><a href="#">关于我们</a></li>
        <li><a href="#">公司荣誉</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </li>
    <li><a href="#">公司产品</a>
      <ul >
        <li><a href="#">关于我们</a></li>
        <li><a href="#">公司荣誉</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </li>
    <li><a href="#">解决方案</a></li>
    <li><a href="#">网络营销</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>
</body>
</html>

解决方案 »

  1.   

    正在帮你看，代码跑不起来啊，正在调。
    69行的括号是干啥的？哪个浏览器的HACK？
      

  2.   

    改了一下你的js代码
    $(function() {
    $("#menu li").mouseover(function(e) {
               $(this).children("ul").show();
            });

    $("#menu li").mouseout(function(e) {
                $(this).children("ul").hide();
            });
    });
      

  3.   

    $(function (){               $("#menu a").click(function (){             $(this).next().show();         });         $("#menu a").mousedown(function (){             $(this).next().css("display","block");         });                 $("#menu a").mouseout(function (){             $(this).next().css("display","none");                   });     });   
    这样写为啥不行啊，能说一下我这个写法的错误吗？