Why my menu doesn't work? - html

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>Home</li>
<li>Tips for health</li>
<li>
<ul class="sub-nav-list">
<li>The healing properties</li>
<li>5 important spices that you should include in your diet</li>
<li>Bad habits and their removal</li>
<li>Water as a source of life</li>
</ul>
</li>
<li>Recipes</li>
<li>
<ul class="sub-nav-list">
<li><a href="#"Salads</a></li>
<li>Lettuce</li>
<li>French salad</li>
<li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li>
</ul>
</li>
<li>
<ul class="sub-nav-list">
<li>Fresh</li>
<li>Sweet fresh</li>
<li>Fresh detox</li>
<li>Citrus fresh</li>
</ul>
</li>
<li>
<ul class="sub-nav-list">
<li>Smoothies</li>
<li>Смути шоколад</li>
<li>Chocolate smoothie</li>
<li>Smoothie with banana and pineapple</li>
</ul>
</li>
<li>Contacts</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>Tips for health</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.
You need to rearrange your html so that the ul.sub-nav-list are within the parent li's
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>Home</li>
<li>
Tips for health
<ul class="sub-nav-list">
<li>The healing properties</li>
<li>5 important spices that you should include in your diet</li>
<li>Bad habits and their removal</li>
<li>Water as a source of life</li>
</ul>
</li>
<li>
Recipes
<ul class="sub-nav-list">
<li><a href="#"Salads</a></li>
<li>Lettuce</li>
<li>French salad</li>
<li><a href="salata%20cherveno%20cveklo.html"Red Beet Salad</a></li>
</ul>
</li>
<li>
Fresh
<ul class="sub-nav-list">
<li>Sweet fresh</li>
<li>Fresh detox</li>
<li>Citrus fresh</li>
</ul>
</li>
<li>
<li>Smoothies<
<ul class="sub-nav-list">
<li>Смути шоколад</li>
<li>Chocolate smoothie</li>
<li>Smoothie with banana and pineapple</li>
</ul>
</li>
<li>Contacts</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