<style type="text/css"> 
<!-- 
body{ 
font-size:12px; 
color:#999999; 

.menu{ 
list-style:none; 

.menu li{ 
position:relative; 
float:left; 

.menu li{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;text-decoration:none;} 
.menu ul{ 
display:none; 
position:absolute; 
top:30px; 
left:-30px; 

.menu ul li {clear:both;text-align:left;font-size:12px;background:#cccccc;} 
.menu a:hover {background:#fafafa;color:#000;border:1px solid #000;} 
--> 
</style> 
<body> 
<ul class="menu"> 
<li> <a href="#">人族 </a></li>
<li> <a href="#">大法师 </a> </li> 
<li>山丘之王 </li> 
<li> <a href="#">兽族</a></li>
<li>贱圣 </li> 
<li>牛头人 </li> 
</ul>   
</body>

解决方案 »

  1.   

    你这不是我要的效果噢
    你都把li里面的ul去掉了
    如何能做到显示,隐藏。
      

  2.   


    再加这一句
    .menu li ul li a {clear:both;text-align:left;font-size:12px;background:#cccccc;} 
      

  3.   

    [code]
    <!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=gb2312" />
    <title>无标题文档</title>
    </head><style type="text/css"> 
    <!-- 
    body{ 
    font-size:12px; 
    color:#999999; 
    } ul#menu{
       list-style:none;
       margin:0;
       clear:both;
       width:100%;
       padding:0;
       font-size:12px;
       text-align:left;
       line-height:28px;
       position:relative;
     }
    ul#menu ul{
       list-style:none;
       margin:0;
       clear:both;
       border:1px solid #ccc;
       padding:0;
       font-size:12px;
       text-align:left;
       line-height:28px;
       float:left;}
    ul#menu li{
       position:relative;
      padding-left:10px;
      padding-right:10px;
       height:28px;
       background:#f5f5f5;
       float:left;
       margin:0 10px;}
    ul#menu li ul li{ white-space:nowrap;}
    ul#menu li ul{
       position:absolute;
       left:0px;
        _left:0px;
       top:28px;
      display:none;
        background:#f5f5f5;}
    ul#menu li.over{
       background:#fff;}
    ul#menu li.out{
       background:#f5f5f5;
    }
    ul#menu a{
       text-decoration:none;
       color:#000;
       _height:0;
    }
    ul#menu a:link { color: #000; text-decoration: none;}
    ul#menu a:hover { color: #f00; text-decoration: underline; }
    --> 
    </style> 
    <body> 
    <ul id="menu"> 
    <li> <a href="#">人族 
    <ul> 
    <li><a href="#">大法师</a> </li> 
    <li>山丘之王</li> 
    </ul> </a> 
    </li> 
    <li> <a href="#">兽族 
    <ul> 
    <li>贱圣 </li> 
    <li>牛头人</li> 
    </ul> </a> 
    </li> 
    </ul> 
    <script type="text/javascript">
    function initMenu(event,ul){
       if(!ul) ul = document.getElementById("menu");
       li = ul.getElementsByTagName("li");
       for(i=0;i<li.length;i++)
       {
           li[i].onmouseover = function(){
               try{
                   this.className='over';
                   this.getElementsByTagName("ul")[0].style.display="block";
               }catch(e){};
           }
           li[i].onmouseout = function(){
               try{
                   this.className='out';
                   this.getElementsByTagName("ul")[0].style.display="none";
               }catch(e){};
           }
       }
    }
    window.onload = initMenu;
    </script>
    </body> </html>[/code]
      

  4.   

    <style type="text/css"> 
    <!-- 
    body{ 
    font-size:12px; 
    color:#999999; 
    } ul#menu{
       list-style:none;
       margin:0;
       clear:both;
       width:100%;
       padding:0;
       font-size:12px;
       text-align:left;
       line-height:28px;
       position:relative;
     }
    ul#menu ul{
       list-style:none;
       margin:0;
       clear:both;
       border:1px solid #ccc;
       padding:0;
       font-size:12px;
       text-align:left;
       line-height:28px;
       float:left;}
    ul#menu li{
       position:relative;
      padding-left:10px;
      padding-right:10px;
       height:28px;
       background:#f5f5f5;
       float:left;
       margin:0 10px;}
    ul#menu li ul li{ white-space:nowrap;}
    ul#menu li ul{
       position:absolute;
       left:0px;
        _left:0px;
       top:28px;
      display:none;
        background:#f5f5f5;}
    ul#menu li.over{
       background:#fff;}
    ul#menu li.out{
       background:#f5f5f5;
    }
    ul#menu a{
       text-decoration:none;
       color:#000;
       _height:0;
    }
    ul#menu a:link { color: #000; text-decoration: none;}
    ul#menu a:hover { color: #f00; text-decoration: underline; }
    --> 
    </style> 
    <body> 
    <ul id="menu"> 
    <li> <a href="#">人族 
    <ul> 
    <li><a href="#">大法师</a> </li> 
    <li>山丘之王</li> 
    </ul> </a> 
    </li> 
    <li> <a href="#">兽族 
    <ul> 
    <li>贱圣 </li> 
    <li>牛头人</li> 
    </ul> </a> 
    </li> 
    </ul> 
    <script type="text/javascript">
    function initMenu(event,ul){
       if(!ul) ul = document.getElementById("menu");
       li = ul.getElementsByTagName("li");
       for(i=0;i<li.length;i++)
       {
           li[i].onmouseover = function(){
               try{
                   this.className='over';
                   this.getElementsByTagName("ul")[0].style.display="block";
               }catch(e){};
           }
           li[i].onmouseout = function(){
               try{
                   this.className='out';
                   this.getElementsByTagName("ul")[0].style.display="none";
               }catch(e){};
           }
       }
    }
    window.onload = initMenu;
    </script>
    </body>