CSS Dropdown Menu not showing child elements - css

Question

I am working on getting my CSS Menu setup, I have followed some tutorials but got myself stuck after hiding some secondary menu items. I just want the items to show up right below their parents. (Not to the side like most tutorials I've seen)
My code is here
http://codepen.io/anon/pen/pJMdqv
HTML
<nav>
<ul>
<li>Home</li>
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
<li>Dictionary</li>
<ul>
<li>Phrases</li>
<li>Onomatopoeia</li>
</ul>
<li>Sentences</li>
<ul>
<li>Beginner</li>
<li>Intermediate</li>
<li>Advanced</li>
</ul>
</ul>
</nav>
CSS
nav {
width: 180px;
margin-top: 15px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
}
nav a {
color: 101010;
padding: 12px 0px;
display: block;
text-decoration: none;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
background: #ececec;
}
nav ul ul {
display: none;
}
nav ul li:hover ul {
display: block;
}

Answer 1

Your nesting is off. Instead of:
<li>Lessons</li>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
You need to include your submenu ul within the parent li that gets hovered over:
<li>
Lessons
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
</ul>
</li>