nav menu won't expand - html

Question

I have a vertical navigation menu and I want to show different levels of the menu upon hovering of certain elements. The problem is that the method I used is not working and I do not understand why. When I hover over "Product", I expect to see a sub-menu expand, but nothing happens. Why?
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
border:1px solid red;
}
nav ul ul {
display:none;
}
nav ul li:hover > ul {
display:block;
}

Answer 1

Your code:
nav ul li:hover > ul {
display:block;
}
Means "Make any ul within a hovered li display:block". Your submenu is not within the LI, it's after it. Here's a working version of what you were trying to do.
Working HTML:
<li>Product
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
</li>
Working CSS:
nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;
}

Answer 2

Also
nav ul ul {
display:none;
}
should be
nav ul li ul {
display:none;
}

Answer 3

Try this for your html:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Product
<ul>
<li>Blueberries</li>
<li>Rasberries</li>
<li>Strawberries</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>

Answer 4

You have two ways of changing this; you can either update the HTML or you can update the CSS.
There are pros and cons to changing code and in a vacuum I can't recommend one approach over the other.
Without changing your HTML you can make the CSS work like this:
nav ul li:hover + ul {
display: block;
}
Note that rather than using the descendant selector this uses the adjacent selector and applies the style to the element that immediately follows the hovered LI.
Alternatively, the HTML change mentioned above does work equally well.
This link http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ provides a fantastic resource.