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

Question

I have problem with the menu in my project in particular with the show him. I want when I hover the Tips for health, Recipes and inside of the last one the sub-menu of Salads, Fresh and Smoothies to show. This is the 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>

And this is the 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

Do you mean that when you hover a parent item ' <li><a href="#">Tips for health</a></li> ' you want the sub navigation ul ' <ul class="sub-nav-list"></ul> ' to show?

If so you have a few things you need to change.

1. You need to rearrange your html so that the ul.sub-nav-list are within the parent li 's
2. You need to target the ul.sub-nav-list rather than the li a 's with the css to display them

For example;

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

This now has the correct structure.

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

This will display any ul that is a child of an li that is hovered