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; }