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

你必须浮动你的第一级列表项：

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

这也将浮动你的第二级列表项，所以也放入：

#menu li li {float: none;}

Answer 2

确保在CSS中，菜单元素中的ul为{list-style：none}

无法使我的水平菜单工作（使用coldfusion）

2 个答案: