读书人

为什么鼠标移下去上拉菜单不显示

发布时间: 2012-12-25 16:18:28 作者: rapoo

求助,为什么鼠标移上去,下拉菜单不显示
<!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>
<style type="text/css">
body{margin:0;padding:0;}
.#list{width:200px;}
.#list ul,li{margin:0;padding:0; list-style-type:none;}
.#list li{background:#f7f7f7;height:24px;line-height:24px;width:200px;border-bottom:1px solid #ccc;text-align:center;position:relative;}
.#list li.hover{background:#c0c0c0 url(http://img.ifeng.com/tres/phoenix/icon2.gif) no-repeat 186px -303px;}
.#list li a{height:24px;line-height:24px;}
.#list li ul{display:none;position:absolute;top:0;left:0;margin-left:200px;}
.#list li ul li{background:#ffffe1;width:200px;}
.#list li ul li.hover{background:#ffffe1;}
</style>
<script src="jquery-1.6.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
$(".a li").css({display:"none"});
$('#list li').hover(function () {

$(this).addClass("hover").find("ul").show();
}, function () {
$(this).removeClass("hover").find("ul").hide();
});
})
</script>
</head>
<body>
<div id="list">
<ul>
<li><a href="#">Solutions</a>
<ul class="a">
<li><a href="../ags/banking.html">Banking</a></li>
<li><a href="../ags/government.html">Government</a></li>
<li><a href="../ags/education.html">Education</a> </li>
</ul>
</li>
<li><a href="#">Software</a>
<ul class="a">
<li><a href="../square/home.html">Content Collaboration</a></li>


<li><a href="../mts/home.html">Real-Time Interactive Client Service</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul class="a">
<li><a href="../ags/app_dev.html">Application Development Outsourcing</a></li>
<li><a href="../ags/app_ass.html">Application Assessment Outsourcing</a></li>
<li><a href="../ags/bus_pro.html">Business Process</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

[解决办法]

$(".a li").css({display:"none"});  
去掉
[解决办法]
去掉的话,页面出来的时候就全显示了。。。不知道怎么实现了。
帮帮忙吧
[解决办法]
引用:
HTML code

$(".a li").css({display:"none"});
去掉

去掉的话,页面出来的时候就全显示了。。。不知道怎么实现了。
帮帮忙吧
[解决办法]

<!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>
<style type="text/css">
body{margin:0;padding:0;}
.#list{width:200px;}
.#list ul,li{margin:0;padding:0; list-style-type:none;}
.#list li{background:#f7f7f7;height:24px;line-height:24px;width:200px;border-bottom:1px solid #ccc;text-align:center;position:relative;}
.#list li.hover{background:#c0c0c0 url(http://img.ifeng.com/tres/phoenix/icon2.gif) no-repeat 186px -303px;}
.#list li a{height:24px;line-height:24px;}
.#list li ul{display:none;position:absolute;top:0;left:0;margin-left:200px;}
.#list li ul li{background:#ffffe1;width:200px;}
.#list li ul li.hover{background:#ffffe1;}
</style>
<script src="jquery-1.6.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
$(".a li").css({display:"none"});


$('#list li').hover(function () {

$(this).addClass("hover").find("ul").show();
$(this).addClass("hover").find(".a li").show();
}, function () {
$(this).removeClass("hover").find("ul").hide();
});
})
</script>
</head>
<body>
<div id="list">
<ul>
<li><a href="#">Solutions</a>
<ul class="a">
<li><a href="../ags/banking.html">Banking</a></li>
<li><a href="../ags/government.html">Government</a></li>
<li><a href="../ags/education.html">Education</a> </li>
</ul>
</li>
<li><a href="#">Software</a>
<ul class="a">
<li><a href="../square/home.html">Content Collaboration</a></li>
<li><a href="../mts/home.html">Real-Time Interactive Client Service</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul class="a">
<li><a href="../ags/app_dev.html">Application Development Outsourcing</a></li>
<li><a href="../ags/app_ass.html">Application Assessment Outsourcing</a></li>
<li><a href="../ags/bus_pro.html">Business Process</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

读书人网 >.NET

热点推荐