can't get my horizontal menu to work (using coldfusion)

Question

First of all, I apologize if this is a stupid question, I'm a dead beginner so I could easily be missing something obvious.

I'm trying to make a horizontal drop down menu where everything is pulled from a database (i don't want to hardcode anything). Right now there are something like 17 main elements, with 3-8 suboptions each. But it's not getting horizontal! Here's the code for the list:

<style type="text/css">

#menu {
width: 100%;
background: #eee;
float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

div#menu ul ul {
display: none;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

div#menu ul li:hover ul
{display: block;}

</style>

<div id="menu">
<ul>
<cfloop query="getmain">
    <li><h2><cfoutput>#sectionname#</cfoutput></h2>
        <ul>
        <cfloop query="getDetail">
            <li><a href="www.somelink.com" style="color:##666666">
<cfoutput>#getDetail.subSectionName#</cfoutput></a></li>
    </cfloop>
    </ul>
</li>
</cfloop>
</ul>
</div>

The CSS is straight from a tutorial (http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#menref) but its really just the first part that i'm worrying about at the moment as I can't even get the list to be horizontal, nevermind all the hiding and showing. What's going wrong there?

BONUS: If I want like 3 or 4 headers per line for a multi-line horizontal menu instead of cramming all 17 on one line, how would that be done? (considering im using a loop from coldfusion). can I stop the loop after 3 or 4 iterations and then start again at that point somehow?

Thanks and sorry for the noobishness!

EDIT: so i think the problem is just that there are too many elements to fit on one line. Thus, the bonus is the real question. How can I have 3 or 4 elements per line when reading from a ? Thanks!

Answer 1

Make sure that in your CSS you have {list-style: none} for the ul in your menu element

Answer 2

You have to float your first level listitems:

#menu li {position: relative; float: left;}

This will also float your second level listitems so also put in this:

#menu li li {float: none;}