lora

I have a working drop down menu almost perfectly styled. It functions however I want the submenus to appear in column rows not straight down. Here is my current HTML and CSS. Thanks in advance!

<div id="navbar">   <ul id="dropdown">      <li class="topnav"><a href="#">Item One</a>         <ul>            <div class="column">               <li><a href="#">Subitem One</a></li>               <li><a href="#">Second Subitem</a></li>               <li><a href="#">3rd Subitem</a></li>            </div>            <div class="column">               <li><a href="#">Subitem One</a></li>               <li><a href="#">Second Subitem</a></li>               <li><a href="#">3rd Subitem</a></li>            </div>            <div class="column">               <li><a href="#">Subitem One</a></li>               <li><a href="#">Second Subitem</a></li>               <li><a href="#">3rd Subitem</a></li>            </div>         </ul>      </li>   </ul></div>

#navbar {	width: 100%;	border-bottom: 1px solid #ccc;	padding: 10 10 10 10;	}#dropdown {	width: 960px;	margin: 0 auto;	padding: 0;	height: 1em;	text-transform: uppercase;	text-align: center;	font-weight: bold;	}#dropdown li {	list-style: none;	float: left;	}#dropdown li a {	display: block;	padding: 3px 8px;	text-decoration: none;	}#dropdown li ul {	display: none; 	width: 10em; /* Width to help Opera out */	background-color: #fff;	}	#dropdown li:hover ul, #navbar li.hover ul {	display: block;	position: absolute;	margin: 0;	padding: 0;	border-bottom: 1px solid #ccc;	}#dropdown li:hover li, #navbar li.hover li {	float: none;	}#dropdown li:hover li a, #navbar li.hover li a {	background-color: #fff;	color: #000;	}.topnav a {	color: #000;	text-decoration: none;	}.topnav a:hover {	border-bottom: 1px solid gold;	}.column {list-style-type: none;float: right;margin: 5px 0 0 0;padding: 0 5px 0 0;width:180px;	}.column a {	color: #999;	text-decoration: none;	font-size: .7em;	}.column a:hover {	border-bottom: 0px;	}

I'm using the CSS below to turn a list of links into columns for the footer:

[font='Helvetica Neue', Arial, Verdana, sans-serif]#footernav {[/font]width: 90%;padding: 20 20 20 20;}.footernavee ul {list-style-type: none;float: right;margin: 10px 0 0 0;padding: 0 10px 0 0;width:240px;}.footernavee {color: #999;text-align: right;text-transform: uppercase;}.footernavee a {color: #999;text-transform: uppercase;text-decoration: none;font-size: .7em;}

It's working but the columns appear oddly staggered. How can I align the columns vertically to the top of the div they are in? Thanks in advance!