如何让
中的对该
操作

Xanl 2013-08-08 10:33:47

如题在做下拉菜单时候无法使主菜单的颜色改变
贴一下代码：



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

////////////////////////////////////////////////////////////////////////////////////////////////
我是将主菜单下的子菜单设置在一个<ul>下并且所有菜单都在一个<ul>下
这样导致在子菜单下移动时主菜单的背景颜色不改变啊
用a：hover也智能改变连接字体的颜色啊
各位高手帮忙看下

...全文

3807 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

鱼公 2013-08-10

打赏
举报

改变字体颜色应该是color、另外你用的是background—color，应该把li的display设成block

街头小贩 2013-08-09

打赏
举报

这种不局不太好搞。这种不行吗？


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

Xanl 2013-08-09