一个关于css的小问题

我建了一个菜单
<div class="menu">    
        <ul>        
            <li><a href="Default.aspx">目录1</a>            
                <ul>                
                    <li><a href="index.aspx" title="主页">主页</a></li>
                    <li><a href="pconline.com.cn" title="太平洋电脑网">太平洋电脑网</a></li>
                </ul>            
            </li>           
            <li><a href="Default.aspx">目录2</a>
                <ul>                
                    <li><a href="index.aspx">主页</a></li>
                    <li><a href="pconline.com.cn">太平洋电脑网</a></li>
                </ul>
            </li>            
            <li><a href="Default.aspx">目录3</a>            
                <ul>                
                    <li><a href="index.aspx">主页</a></li>
                    <li><a href="pconline.com.cn">太平洋电脑网</a></li>
                </ul>            
            </li>        
        </ul>    
    </div>
我在css里面设置
.menu ul li ul
{
   display:none;//隐藏菜单
}我要怎么样才可以在鼠标停在目录1，目录2，目录3的时候显示菜单？

解决方案 »

  1.   

    <!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 runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
    function show(id) {
    var v = document.getElementById(id);
    if(v.style.display == '')
    v.style.display = 'none';
    else
    v.style.display = '';
    }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    <div class="menu">    
            <ul>        
                <li><a href="Default.aspx" onmouseenter="show('d1')" onmouseleave="show('d1')">目录1</a>            
                    <ul id="d1" style="display:none">                
                        <li><a href="index.aspx" title="主页">主页</a></li>
                        <li><a href="pconline.com.cn" title="太平洋电脑网">太平洋电脑网</a></li>
                    </ul>            
                </li>           
                <li><a href="Default.aspx" onmouseenter="show('d2')" onmouseleave="show('d2')">目录2</a>
                    <ul id="d2" style="display:none">                
                        <li><a href="index.aspx">主页</a></li>
                        <li><a href="pconline.com.cn">太平洋电脑网</a></li>
                    </ul>
                </li>            
                <li><a href="Default.aspx" onmouseenter="show('d3')" onmouseleave="show('d3')">目录3</a>            
                    <ul id="d3" style="display:none">                
                        <li><a href="index.aspx">主页</a></li>
                        <li><a href="pconline.com.cn">太平洋电脑网</a></li>
                    </ul>            
                </li>        
            </ul>    
        </div>    </form>
    </body>
    </html>测试过的，没问题。
      

  2.   

    我指的是css怎么设置？下面是我看别人设置的，但是不太明白是什么意思
    .menu ul li:hover ul {
    display:block; 
    position:absolute; 
    top:31px; 
    left:0; 
    width:105px;
    }.menu ul li a.hide, .menu ul li a:visited.hide {
    display:none;
    }.menu ul li a:hover ul li a:hover {
    background:#dfc184; 
    color:#000;
    }