                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

我这个不能实现下拉显示大神帮我看看怎么回事啊谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

*{ margin:0;padding: 0;}

#dh{ background:#999; width:1000px; height:40px; margin:0 auto;}

ul{list-style:none; }

ul li{ float:left; width:200px; line-height:40px; text-align:center;}

#dh ul li a { text-decoration:none; color:#FFF}

#dh ul li ul a{ color:#000; display:none}

#dh ul li a:hover{ color:#FF0;}

#dh ul li ul li a:honve{ background-color:#C36}

#dh ul li:honve ul li{ display:block}

</style>

</head>

<body>

<ul>

</li>

<ul>

</ul></li>

</ul>

</div>

</body>

</html>

qq_尨柏音频_0

2016-05-16

源自：形形色色的下拉菜单 1-1

关注问题我要回答

602

操作

收起

2 回答

TWT
2016-06-14

<!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" />
  <title>无标题文档</title>
  <style type="text/css">
    *{ margin:0;padding: 0;}
    #dh{ background:#999; width:1000px; height:40px; margin:0 auto;}
    ul{list-style:none; }
    ul li{ float:left; width:200px; line-height:40px; text-align:center;}
    #dh ul li a { text-decoration:none; color:#FFF}
    #dh ul li ul a{ color:#000; display:none} 
    #dh ul li a:hover{ color:#FF0;}
    #dh ul li ul li a:honve{ background-color:#C36}
    #dh ul li:honve ul li{ display:block}
  </style>
</head>
<body>
  <div id="dh">
   <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">新闻中心</a>   
      <ul>
       <li><a href="#">慕课教程</a> </li>
       <li><a href="#">慕课教程</a> </li>
       <li><a href="#">慕课教程</a> </li>
       <li><a href="#">慕课教程</a> </li>
     </ul>
   </li>
   <li><a href="#">慕课教程</a></li>
   <li><a href="#">联系我们</a></li>
 </ul>
</div>
</body>
</html>

你代码第12行设置的 #dh ul li ul a{ color:#000; display:none;} ，但是后续代码没有设置对应的a标签显示（display:block;），而是设置了第15行的 #dh ul li:honve ul li{ display:block}

可以去除第12行设置的 #dh ul li ul a{ display:none;}，通过设置 #dh ul li ul{ display:none;} #dh ul li:hover ul{ display:block;} 来实现下拉效果。

<!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" />
  <title>无标题文档</title>
  <style type="text/css">
    *{ margin:0; padding:0;}
    #dh{ background:#999; width:1000px; height:40px; margin:0 auto;}
    ul{ list-style:none; }
    ul li{ float:left; width:200px; line-height:40px; text-align:center;}
    #dh ul li a { text-decoration:none; color:#FFF;}
    #dh ul li ul a{ color:#000;} 
    #dh ul li a:hover{ color:#FF0;}
    #dh ul li ul li a:hover{ background-color:#C36}
    #dh ul li ul{ display:none;}
    #dh ul li:hover ul{ display:block;}
  </style>
</head>
<body>
  <div id="dh">
   <ul>
    <li>
      <a href="#">首页</a>
    </li>
    <li><a href="#">新闻中心</a>   
      <ul>
       <li><a href="#">慕课教程</a> </li>
       <li><a href="#">慕课教程</a> </li>
       <li><a href="#">慕课教程</a> </li>
       <li><a href="#">慕课教程</a> </li>
     </ul>
   </li>
   <li><a href="#">慕课教程</a></li>
   <li><a href="#">联系我们</a></li>
 </ul>
</div>
</body>
</html>