Difficulty creating CSS menu with multiple columns -

i've read through similar threads on site , found helpful tips, i'm still having difficulty getting columns work correctly in css drop down menu. test site here: http://iphonebuy-host1.gaiahost.net/index.html

in part i'm using ideas method 4 in article - http://alistapart.com/article/multicolumnlists - xhtml , i'm using html, maybe that's causing issue?

the main thing list items in second column don't stick bottom of header. according referenced article, setting negative margin on .reset supposed bring entire second column want it, header (which has .reset applied it) moving up.

i should have view menu in firefox see i'm talking - far it's more messed in safari , haven't tried ie or chrome.

css

/** top navigation menu **/ .topnav {     list-style: none;     background-color: #fff;     font: 1.313em arial, sans-serif;     color: #0071bc;     margin: -1.8em 0 1.2em 25em;     text-align: center; } .topnav li {     position: relative;     display: inline;     padding: 0 .5em 0 .5em;     border: none; } .topnav {      display: inline-block; }  /** drop-down menu **/ .topnav li ol {     background: #fff;     list-style: none;     position: absolute;     width: 15.5em;     font: .8em arial, sans-serif;     padding: 0 1em .5em .5em;     margin-top: -.1em;     left: -9999px;     z-index: 200;     -webkit-border-radius: 0 0 .5em .5em;        -moz-border-radius: 0 0 .5em .5em;             border-radius: 0 0 .5em .5em;     -webkit-box-shadow:  0 3px 2px 1px #ccc;        -moz-box-shadow:  0 3px 2px 1px #ccc;             box-shadow:  0 3px 2px 1px #ccc; }   .topnav li li h1 {     font: bold 1.2em arial, sans-serif;     white-space: nowrap;     margin: .5em 0 .5em 0; } .topnav li li h2 {     font: 1em arial, sans-serif;     white-space: nowrap; } .topnav li li {     white-space: nowrap;     display: block; } .topnav li: hover ol {     left: 0;     margin-left: -.9em; } .topnav li: hover {     color: #99cccc; } .topnav li: hover ol {     color: #0071bc; } .topnav li: hover ol a: hover {     color: #99cccc; } .topnav li li.column1 {      margin-left:  0em;     width: 6.8em;     float: left;     line-height: 1.5em; } .topnav li li.column2 {      margin-left: 10em;     width: 4em;     float: left;     line-height: 1.5em; } .topnav li li.reset {     margin-top: -10.8em; } 

html

<div class="topnav">   <ol>     <li><a href="index.html" class="vertical-line">home</a></li>      <li><a href="#" class="vertical-line">get quote</a>       <ol>         <li class="column1"><h1>select phone:</h1></li>         <li class="column1"><h2>cdma</h2></li>         <li class="column1"><a href="cdma3gs8gb">3gs 8gb</a></li>         <li class="column1"><a href="cdma3gs16gb">3gs 16gb</a></li>         <li class="column1"><a href="cdma4-8gb">4 8gb</a></li>         <li class="column1"><a href="cdma4-16gb">4 16gb</a></li>         <li class="column1"><a href="cdma4s16gb">4s 16gb</a></li>         <li class="column1"><a href="cdma4s32gb">4s 32gb</a></li>         <li class="column2 reset"><h2>at&amp;t gsm</h2></li>         <li class="column2"><a href="att3gs8gb">3gs 8gb</a></li>         <li class="column2"><a href="att3gs16gb">3gs 16gb</a></li>         <li class="column2"><a href="att4-8gb">4 8gb</a></li>         <li class="column2"><a href="att4-16gb">4 16gb</a></li>         <li class="column2"><a href="att4s16gb">4s 16gb</a></li>         <li class="column2"><a href="att4s32gb">4s 32gb</a></li>       </ol>     </li>     <li><a href="about.html">about</a></li>   </ol> </div> 

the code in question floats list items. method 4 approach it's based on doesn't. 1 change prevents approach having chance work intended.

in case this, it's best either stay entirely consistent approach, or go in different direction , not imitate @ all. getting caught in middle -- inconsistently following approach -- cause trouble.

split html bite-sized chunks

you'll have far easier time styling if change html. instead of putting single list , splitting list 2 columns, try splitting html 2 separate lists.

it may require adding few wrapper divs well. following:

<div class="topnav">   <ul>     <li><a href="index.html" class="vertical-line">home</a></li>      <li><a href="#" class="vertical-line">get quote</a>       <div class="dropdown">         <h1>select phone:</h1>          <div class="columns clearfix">   <!-- add reliable clearfix -->           <div class="column1">   <!-- floated left -->             <h2>cdma</h2>             <ul>               <li><a href="cdma3gs8gb">3gs 8gb</a></li>               <li><a href="cdma3gs16gb">3gs 16gb</a></li>               ...             </ul>           </div>            <div class="column2">   <!-- floated left -->             <h2>at&amp;t gsm</h2>             <ul>               <li><a href="att3gs8gb">3gs 8gb</a></li>               <li><a href="att3gs16gb">3gs 16gb</a></li>               ...             </ul>           </div>         </div>        </div>     </li>     <li><a href="about.html">about</a></li>   </ul> </div> 

splitting related parts of dropdown separate html elements gives more flexibility styling it.

and semantically, html of sort better, because h1 , h2 tags aren't being treated if they're same type of content specific models of phone. helps seo , accessibility.