не может заставить мое горизонтальное меню работать (с использованием coldfusion)

Question

Прежде всего, я прошу прощения, если это глупый вопрос, я мертвый новичок, поэтому я мог легко пропустить что-то очевидное.

Я пытаюсь сделать горизонтальное выпадающее меню, где все вытаскивается из базы данных (я не хочу ничего делать). Прямо сейчас есть что-то вроде 17 основных элементов, по 3-8 супопций каждый. Но он не становится горизонтальным! Вот код для списка:

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

CSS-прямо из учебника (http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#menref), но его действительно только в первой части, что Я беспокоюсь о в тот момент, когда я не могу даже получить список до быть горизонтальным, не считая всех скрытий и показов. Что там не так?

БОНУС: Если я хочу как 3 или 4 заголовка в строке для многострочного горизонтального меню вместо того, чтобы перебирать все 17 на одной строке, как это сделать? (учитывая, что im использует петлю из coldfusion). могу ли я остановить цикл после 3 или 4 итераций, а затем начать снова в этой точке?

Спасибо и извините за noobishness!

EDIT: так что я думаю, что проблема заключается в том, что слишком много элементов для одной линии. Таким образом, бонус - это реальный вопрос. Как я могу иметь 3 или 4 элемента в строке при чтении с? Благодаря!

Answer 1

Вы должны плавать ваш первый ListItems уровня:

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

Это будет также поплавок ваш второй уровень listitems так же, как и в этом:

#menu li li {float: none;} 

Answer 2

Убедитесь, что в вашем CSS у вас есть {список-стиль: нет} для ул в вашем элементе меню