סידור <li> עם css

[DCB]

HTML

<div id="nav"><ul>
   <li>ITEM</li>
   <li>ITEM 2
      <ul>
         <li>DROP 1</li>
         <li>DROP 2</li>
      </ul>
   </li>
   <li>ITEM 3</li>
</ul></div>

JavaScript

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="li") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace&#187;
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

CSS

ul {margin:0; padding:0; list-style:none; width:150px; border-bottom:1px solid #ccc;}
ul li {position:relative;}
li ul {position:absolute; left:149px; top:0; display:none;}

ul li a {display:block; text-decoration:none; color:#777;background:#fff; /* IE6 Bug */ padding:5px; border:1px solid #ccc; border-bottom:0;}
	
/* Holly Hack. IE Requirement \*/
* html ul li { float:left; height:1%; }
* html ul li a { height:1%; }
/* End */

li:hover ul, li.over ul { display:block; }

איך אני הופך את הבחורצ'יק פה להורזינטלי (אחד ליד השני) ולא ורטיקלי (אחד מתחת לשני)
העניין הוא שהתת תפריט צריך להיות ורטיקלי (אחד מתחת לשני)