navigation - CSS Dropdown Menu not showing child elements -

i working on getting css menu setup, have followed tutorials got myself stuck after hiding secondary menu

items. want items show right below parents. (not side tutorials i've seen)

my code here http://codepen.io/anon/pen/pjmdqv

html

<nav>     <ul>         <li><a href="#">home</a></li>         <li><a href="#">lessons</a></li>         <ul>             <li><a href="#">lesson 1</a></li>             <li><a href="#">lesson 2</a></li>         </ul>         <li><a href="#">dictionary</a></li>         <ul>             <li><a href="#">phrases</a></li>             <li><a href="#">onomatopoeia</a></li>         </ul>         <li><a href="#">sentences</a></li>         <ul>             <li><a href="#">beginner</a></li>             <li><a href="#">intermediate</a></li>             <li><a href="#">advanced</a></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 { 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; } 

your nesting off. instead of:

<li><a href="#">lessons</a></li> <ul>   <li><a href="#">lesson 1</a></li>   <li><a href="#">lesson 2</a></li> </ul> 

you need include submenu ul within parent li gets hovered over:

<li>   <a href="#">lessons</a>   <ul>     <li><a href="#">lesson 1</a></li>     <li><a href="#">lesson 2</a></li>   </ul> </li>