为什么我的菜单不起作用？

Question

我在我的项目中遇到了问题，特别是与他展示的菜单。当我将健康秘诀，食谱以及最后一张沙拉，新鲜和冰沙的子菜单展示出来时，我想要。 这是HTML代码：

` 
<div id="nav"> 
    <ul class="nav-list"> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="#">Tips for health</a></li> 
     <li> 
      <ul class="sub-nav-list"> 
       <li><a href="lechebn%20isvoistva.html">The healing properties</a></li> 
       <li><a href="5%20vajni%20podpravki.html">5 important spices that you should include in your diet</a></li> 
       <li><a href="loshi%20navici.html">Bad habits and their removal</a></li> 
       <li><a href="vodata.html">Water as a source of life</a></li> 
      </ul> 
     </li> 
     <li><a href="title=">Recipes</a></li> 
     <li> 
      <ul class="sub-nav-list"> 
       <li><a href="#"Salads</a></li> 
       <li><a href="zelena%20salata.html">Lettuce</a></li> 
       <li><a href="frenska%20salata.html">French salad</a></li> 
       <li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li> 
      </ul> 
     </li> 
     <li> 
      <ul class="sub-nav-list"> 
       <li><a href="#">Fresh</a></li> 
       <li><a href="sweet%20fresh.html">Sweet fresh</a></li> 
       <li><a href="fresh%20za%20detoksikaciq.html">Fresh detox</a></li> 
       <li><a href="citrusov%20fresh.html">Citrus fresh</a></li> 
      </ul> 
     </li> 
     <li>  
      <ul class="sub-nav-list"> 
       <li><a href="#">Smoothies</a></li> 
       <li><a href="smuti%20shokolad.html">Смути шоколад</a></li> 
       <li><a href="tropichesko%20smuti.html">Chocolate smoothie</a></li> 
       <li><a href="smuti%20banan%20ananas.html">Smoothie with banana and pineapple</a></li> 
      </ul> 
     </li> 
     <li><a href="contact.html">Contacts</a></li> 
    </ul> 
</div> 

这是CSS代码：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    background-color: #F6F2E8; 
} 
li a { 
    display: block; 
    color: #A6BB79; 
    padding: 8px 0 8px 16px; 
    text-decoration: none; 
} 
.sub-nav-list{ 
    display: none; 
} 
ul.nav-list li > ul.sub-nav-list li a:hover { 
    color: red; 
    display: block; 
} 

Answer 1

你的意思是，当你将鼠标悬停父项目“<li><a href="#">Tips for health</a></li>”你想子导航UL“<ul class="sub-nav-list"></ul>”以显示？

如果是这样，你有几件事情需要改变。

1. 您需要重新安排你的HTML，这样的ul.sub-nav-list都是父li内的
2. 您需要为目标的ul.sub-nav-list而非li a的用CSS来显示它们

例如;

<div id="nav"> 
    <ul class="nav-list"> 
     <li><a href="home.html">Home</a></li> 
     <li> 
      <a href="#">Tips for health</a> 
      <ul class="sub-nav-list"> 
       <li><a href="lechebn%20isvoistva.html">The healing properties</a></li> 
       <li><a href="5%20vajni%20podpravki.html">5 important spices that you should include in your diet</a></li> 
       <li><a href="loshi%20navici.html">Bad habits and their removal</a></li> 
       <li><a href="vodata.html">Water as a source of life</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="title=">Recipes</a> 
      <ul class="sub-nav-list"> 
       <li><a href="#"Salads</a></li> 
       <li><a href="zelena%20salata.html">Lettuce</a></li> 
       <li><a href="frenska%20salata.html">French salad</a></li> 
       <li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">Fresh</a> 
      <ul class="sub-nav-list"> 
       <li><a href="sweet%20fresh.html">Sweet fresh</a></li> 
       <li><a href="fresh%20za%20detoksikaciq.html">Fresh detox</a></li> 
       <li><a href="citrusov%20fresh.html">Citrus fresh</a></li> 
      </ul> 
     </li> 
     <li>  
      <li><a href="#">Smoothies</a>< 
      <ul class="sub-nav-list"> 
       <li><a href="smuti%20shokolad.html">Смути шоколад</a></li> 
       <li><a href="tropichesko%20smuti.html">Chocolate smoothie</a></li> 
       <li><a href="smuti%20banan%20ananas.html">Smoothie with banana and pineapple</a></li> 
      </ul> 
     </li> 
     <li><a href="contact.html">Contacts</a></li> 
    </ul> 
</div> 

这现在具有正确的结构。

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    background-color: #F6F2E8; 
} 
li a { 
    display: block; 
    color: #A6BB79; 
    padding: 8px 0 8px 16px; 
    text-decoration: none; 
} 
.sub-nav-list{ 
    display: none; 
} 
ul.nav-list li:hover > ul.sub-nav-list { 
    color: red; 
    display: block; 
} 

这将显示任何ul是一个li的孩子正在徘徊