Warum funktioniert mein Menü nicht?

Question

Ich habe Probleme mit dem Menü in meinem Projekt insbesondere mit dem zeigen ihn. Ich möchte, wenn ich die Tipps für Gesundheit, Rezepte und in der letzten das Untermenü von Salaten, Fresh und Smoothies überlege. Diese ist der HTML-Code:

` 
<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> 

Und dies ist der CSS-Code:

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

Haben Sie bedeuten, dass, wenn Sie ein übergeordnetes Element schweben '<li><a href="#">Tips for health</a></li>' können Sie die Unternavigation ul wollen '<ul class="sub-nav-list"></ul>' zeigen?

Wenn ja, haben Sie ein paar Dinge, die Sie ändern müssen.

1. Sie benötigen html neu zu ordnen, so dass die ul.sub-nav-list innerhalb des übergeordneten sind li 's
2. Sie müssen die ul.sub-nav-list anstatt die li a Ziel ist mit der CSS ihnen

anzuzeigen Beispielsweise;

<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> 

Dies hat jetzt die richtige Struktur.

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; 
} 

Dies wird jede ul anzuzeigen, dass ein Kind eines li ist die