如何让<li>中的<a href="#">对该<li>操作
如题 在做下拉菜单时候 无法使主菜单的颜色改变
贴一下代码：
<!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>
<style type="text/css">
*
{
width:50px;
height:30px;
}
#main li ul
{
text-align:center;
background-color: Gray;
list-style: none;
padding: 0px;
display:none;
margin-top:12px;
}
#main
{
text-align:center;
}
#main li
{
background-color:ButtonFace;
list-style:none;
}
</style>
<script type="text/javascript">
function mouseover(li) {
var pp =li.getElementsByTagName("ul")[0];
pp.style.display = "block";
}
function mouseout(li) {
var pp =li.getElementsByTagName("ul")[0];
pp.style.display = "none";
}
function mover(li) {
li.style.background = "Red";
}
function mout(li) {
li.style.background = "ButtonFace";
}
</script>
</head>
<body>
<ul id="main">
<li onmouseover="mouseover(this),mover(this)" onmouseout="mouseout(this),mout(this)">
<a href="#">1</a>
<ul>
<li onmouseover="mover(this)" onmouseout="mout(this)"><a href="#">11</a></li>
<li onmouseover="mover(this)" onmouseout="mout(this)"><a href="#">12</a></li>
</ul>
</li>
</ul>
</body>
各位高手帮忙看下
[解决办法]
这种不局不太好搞。这种不行吗？
<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
#main{width:300px;height:40px;line-height:40px;}
#main dd{float:left;padding:0 10px 0 0;height:40px;line-height:40px;text-align:center;}
label.topguide{position:relative;display:block;}
.node{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-position: right -425px;
z-index:3;
display:block;
position:absolute;
top:0;
width:70px;
left:0;
}
.focus{
background-color:#fff;
border-width: 1px 1px medium;
color:#333!important;
border-color: #07A6EC #07A6EC -moz-use-text-color;
border-style: solid solid none;
border: 1px solid #07A6EC;
border-bottom: none;
}
.topguide ul{
float:left;
width:100px;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #07A6EC;
display: none;
position: absolute;
left:0;
top: 40px;
z-index: 1;
}
.topguide ul li{float:left;width:100px;height:30px;line-height:30px;}
.topguide ul li a{color:#333!important;}
.node:hover,.topguide ul li:hover{background-color:#F2F7FC;}
.topguide ul li:hover a{color:#f00!important;}
</style>
</head>
<body>
<div id="main">
<dl>
<dd>
<label class="topguide">
<a class="node" href="">1</a>
<ul>
<li><a href="">11</a></li>
<li><a href="">22</a></li>
<li><a href="">33</a></li>
<li><a href="">44</a></li>
</ul>
</label>
</dd>
</dl>
</div>
</body>
<script type="text/javascript">$('.topguide').hover(function(){$(this).find('a.node').addClass('focus');$(this).find('ul').show();},function(){$(this).find('a.node').removeClass('focus');$(this).find('ul').hide();});</script>
</html>
