CSS Menu - 2nd and 3rd level not aligning -

CSS Menu - 2nd and 3rd level not aligning -

here issue, 3rd level row below 2nd level when displayed. no thought why happening. can help me?

here site: cmhs.cabe.k12.wv.us/webdesign

here css code:

#menu ul { font-family: arial, verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; z-index:1; } #menuul li { display: block; position: relative; float: left; } #menu li ul { display: none; } #menu ul li { display: block; text-decoration: none; color: #ffffff; border-top: 0px solid #ffffff; border-bottom: 1px solid #cccccc; margin-left: 1px; white-space: nowrap; } #menu ul li a:hover { background:#ffffff; border-top:thin; border-color:#000000; } #menu li:hover ul { display: block; position: absolute; width:220px; background:#ffffff; border-top:thin; border-color:#000000; } #menu li:hover li { float: none; font-size: 11px; margin:0; background:#ffffff; border-top:thin; border-color:#000000; } #menu li:hover { display:block; color:#000000; background:#ffffff; margin:0; float:none; border-top:thin; border-color:#000000; } #menu li:hover li a:hover { color:#ffffff; background:#990000; } #menu ul ul{ top:auto; } #menu li ul ul { left:12em; margin:0px 0 0 0px; } #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{ display:none; } #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{ display:block; float:none; margin: 0; } #menu { width: 940px; height: 36px; margin: 0 auto; padding: 0; } #menu ul { margin: 0px 0px 0px 10px; padding: 0; list-style: none; line-height: normal; } #menu li { float: left; } #menu { display: block; height: 26px; margin-right: 2px; margin-bottom: 10px; padding: 10px 20px 0px 20px; text-decoration: none; text-align: center; text-transform: uppercase; font-family: arial, helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #ffffff; border: none; } #menu a:hover, #menu .current_page_item { background: #ffffff; text-decoration: none; color: #333333; } #menu .current_page_item { background: #ffffff; color: #333333; }

here html menu:

<div id="menu"> <li><a href="#">departments</a> <ul> <li><a href="#">a-f</a> <ul> <li><a href="http://cmhs.cabe.k12.wv.us/webdesign/departments/art.php">art</a></li> <li><a href="http://cmhs.cabe.k12.wv.us/webdesign/departments/agriculture.php">agriculture ed</a></li> </ul> </li> <li><a href="#">h-m</a> <ul> <li><a href="http://cmhs.cabe.k12.wv.us/webdesign/departments/healtheducation.php">health education</a></li> <li><a href="http://cmhs.cabe.k12.wv.us/webdesign/departments/healthoc.php">health occupations</a></li> </ul> </li> <li><a href="#">p-z</a> <ul> <li><a href="http://cmhs.cabe.k12.wv.us/webdesign/departments/physed.php">physical education</a></li> <li><a href="http://cmhs.cabe.k12.wv.us/webdesign/departments/culinary.php">prostart culinary ed</a></li> </ul> </li> </ul> </li>

thanks help!

css