html - Can't make CSS dropdown menu show up below its parent? -

i have menu this

<nav id="nav">  <ul>   <li>home</li>   <li>menu1    <ul>     <li>sub1</li>     <li>sub2</li>    </ul>   </li>   <li>menu2    <ul>     <li>sub1</li>     <li>sub2</li>    </ul>   </li>  </ul> </nav> 

my css file this

#nav ul li {     display: inline; } #nav ul ul {     display: none;   } #nav ul li:hover > ul {     display: block;     position: absolute; } #nav ul ul li {     display: block;  } 

the sub-menu items drop down , fine, it's they're dropping down under first list item, home.

how can them drop down under parent list item they're under?

here fiddle working solution: http://jsbin.com/akazev/2/edit

have @ new css:

nav ul li {     display:  block;     float: left; } nav ul ul {     display: none;   } nav ul li:hover > ul {     display: block;     position: absolute;     margin-left: -30px; } nav ul ul li {     display: block;      float: none; } 

instead of displaying first-level links inline, display them either inline-block or float. bugged nav. if use float (like did), don't forget set deeper level links float: none. have set margin-left absolutely positioned ul's.

ps: isn't <nav id="nav"> bit pointless?