css列表和类别下拉列表

Question

我的菜单有这段代码。这是我主菜单的下拉菜单。我想要有类别（全部设置为150px witdh），在它们下面，有产品链接。所有这些都必须适应，比如说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

您可以尝试：#下拉列表>李float：左；右侧边距：10px；}

这样，您只选择一个接一个的主类别，它们的子列表在它们下面。余量很重要，否则浮动会破坏元素的正常流动，并且它们堆叠得太近！：）希望我帮过忙。

Answer 3

您可能需要#dropdown > li{float:left;}，它只将float left应用于#dropdown ul的直接继承的li元素。

这就是你想要的造型吗？