html - 无法让我的水平菜单工作(使用 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 个标题塞在一行中，该怎么做？ (考虑使用来自 coldfusion 的循环)。我可以在 3 或 4 次迭代后停止循环，然后以某种方式重新开始吗？

感谢并为您的笨拙感到抱歉!

编辑:所以我认为问题在于有太多元素无法放在一行中。因此，奖金才是真正的问题。从 a 读取时，每行如何包含 3 或 4 个元素？谢谢!

Answer 1

你必须 float 你的第一级列表项:

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

这也会使您的二级列表项 float ，因此也放入:

#menu li li {float: none;}