Question

尝试制作菜单，非常适合CSS。我认为错误出现在

中

 .nav ul li:hover > ul li a { color: purple; min-width:150px;}
  .nav ul li:hover > ul li a:hover { color:pink;}

但我无法弄清楚是什么，也没有经验可以弄清楚它是否在其他地方。除了下拉列表之外的其他所有内容似乎都有效。

我一直在使用http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS作为参考。

非常感谢你的帮助。

<!DOCTYPE html!>
<html lang="en">
  <head>
  <! css link goes here !>
  <style type="text/css">
  body {
       background-color:orange}


  .nav ul ul {               /* the . in front on nav is critical! */
      display:none;
       }

  .nav ul li: hover > ul {
      display: block;
       }

  .nav ul {
       padding: 0 20px;
       border-radius: 10px;
       list-style: none;
       position: relative;
       display: inline-block;
       background: green}

  .nav ul li {
       float:left}

  .nav ul li a{ 
       padding: 5px 10px 5px 10px;
       display:block;
       color: red; /* heading text color */
       text-decoration: none;
       }

  .nav ul li:hover {
       background: orange; /* hover over menu and color changes */
        }

  .nav ul li:hover a {
       color:blue; /* hover over menu and text color changes */
       } 

  .nav ul li:hover > ul { margin:0px; padding:0px;}
  .nav ul li:hover > ul li { float:none; display:block;}
  .nav ul li:hover > ul li a { color: purple; min-width:150px;}
  .nav ul li:hover > ul li a:hover { color:pink;}

  .nav ul li { position:relative; }
  .nav ul li ul { position: absolute; top:30px; left:0px; }

  }

  </style>
  </head>

  <body>
  <div class="nav">
       <ul> 
            <li><a href="media">Media</a></li>  
            <li><a href="previous expeditions">Previous Expeditions</a> 

                 <ul> 
                      <li><a href="morocco">Morocco</a></li>
                      <li><a href="iceland">Iceland</a></li>
                      <li><a href="tajikistan">Tajikistan</a></li>
                 </ul>
            </li>
            <li> <a href="sponsors">Sponsors</a></li>
        </ul>



  </div>  <! end of nav div!>
  </body>
</html>

Answer 1

在CSS后更新。它会显示下拉列表。

  .nav ul li:hover > ul { margin:0px; padding:0px; display:block;}

Fiddle Here

这会解决您的问题吗？

Answer 2

代码没有任何问题。

请看这一行：

.nav ul li: hover > ul {
  display: block;
}

您是否注意到hover之前的空白。只需删除它就可以了。每当你编写这种选择器时，:和伪选择器之间就不应该有空格。

改变之后：

.nav ul li:hover > ul {
  display: block;
}

请参阅working demo。

制作CSS下拉菜单 - 找不到错误

2 个答案: