css - Collapsing a Menu with JQuery -

i working on jquery menu needs expand , collapse. however, i'm having issues getting sub-menus line like. basically, want sub menu items in-line top-menu items. however, stands now, entire sub-menu item indented. code looks following:

html

<ul id="themenu">    <li><a title="open or close section" href="#">info</a>                         <ul>        <li><a href="#">basic</a></li>        <li><a href="#">advanced</a></li>      </ul>    </li>     <li><a title="open or close section" href="#">documents</a>      <ul>        <li><a href="#">newsletters</a></li>        <li><a href="#">policies , procedures</a></li>        <li><a href="#">job descriptions</a></li>      </ul>    </li>  </ul> 

javascript

$(document).ready(function () {   $("#themenu > li > a").not(":first").find("+ ul").slideup(1);   $("#themenu > li > a").click(function () {     $(this).find("+ ul").slidetoggle("fast");   }); }); 

css

#themenu, #themenu ul { list-style:none; width:15em; } #themenu { background:#f6f6f6; color:#010101;    display:block; font-weight:bold; padding:0.5em 1em; text-decoration:none;    border:1px solid #dfdfdf;  } #themenu ul { background:#f6f6f6; color:#010101;    font-weight:normal; text-decoration:none;  } #themenu ul a:hover { background:#f0ebe1; text-decoration:underline; color:#711515; } 

how make sub menus flush left edge of root menu?

thank you!

added: demo here

 #themenu, #themenu ul { list-style:none; width:15em; } 

on

 #themenu, #themenu ul { list-style:none; width:15em;margin:0;padding:0; }