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

songchaoming 2012-11-13 03:40:50

各位大师，小弟在写一个导航菜单时，出现一个问题，一直搞不清楚，当我把鼠标划过菜单时，他的子菜单会显示出来，但是我想点这个子菜单却点不到，原因是因为我划出菜单时，子菜单会隐藏，我就不知道，怎么样当我鼠标划过菜单时可以显示子菜单，同时可以点击子菜单，而划出菜单时又能隐藏子菜单。下面是我自己写的代码，谁能告诉我一下，问题原因所在。谢谢

各位大师。

<!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>

...全文

142 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

songchaoming 2012-11-13

打赏
举报

$(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");                   });     });

这样写为啥不行啊，能说一下我这个写法的错误吗？

jack_zhang_kodak 2012-11-13

打赏
举报

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

jack_zhang_kodak 2012-11-13