Question

我的菜单有这个代码。这是我主菜单的下拉菜单。我希望有类别（所有设置为150px），并在它们下面，与产品链接。所有这些都必须适合300px的高度，流量是垂直的，直到300px被填满。如果超过这个高度，下一个ul将显示在第二列，然后是第三列......直到有类别。

<ul id="dropdown">
<li>Cat 1
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
        <li>Product 4</li>
        <li>Product 5</li>
        <li>Product 6</li>
        <li>Product 7</li>
        <li>Product 8</li>
    </ul>
</li>
<li>Cat 2
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
    </ul>
</li>
<li>Cat 3
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
        <li>Product 4</li>
    </ul>
</li>
<li>Cat 4
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
    </ul>
</li>
<li>Cat 5

</li>
<li>Cat 6
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
    </ul>
</li>

问题在于，如果我设置#dropdown {height：300px;}，则主ul设置为此高度，但内部项目将脱离ul而不会进入第二列。如果我设置#dropdown li {float：left;}，则项目将按行显示，而不是以列显示。

Answer 1

尝试使用子选择器

#dropdown > li{float:left;}

（而不是后代选择器#dropdown li{float:left;}）

此外，请注意儿童选择器更快。

Answer 2

您可能需要#dropdown > li{float:left;}，这只会向li #dropdown的直接后代的ul元素应用浮动。

this你看起来是什么样的？

Answer 3

您可以尝试： #dropdown＆gt; li { 向左飘浮; 保证金权利：10px; }

通过这种方式，您只选择主要类别，使其下方的子列表彼此相邻。边距很重要，否则浮动会破坏元素的正常流动，并且它们彼此堆得太近了！ :)希望我帮助过。

css列表下拉列表

3 个答案: