html - 我应该在 CSS 中选择哪个标签以及我应该暗示哪些 css 规则以便元素将出现在列中(大型菜单)

Question

    <ul class="categories">

            <li><a href="#" >All categories</a>

                <ul class="sub-menu"></br>
                <li><a href="#">item </a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item </a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item </a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>
                <li><a href="#">item</a></li>


                </ul>

            </li>       
    </ul>


CSS:

  .sub-menu {
display: none;

}

.categories li:hover .sub-menu {
    display:block;
}

我正在尝试制作一个大型菜单。 在这种情况下，我应该在 CSS 中选择哪个标签以及我应该暗示哪些 CSS 规则，以便元素将出现在列中(大型菜单)。

非常感谢

Answer 1

您可以使用 columns

.sub-menu {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3; /* Edge, IE10+ */
    list-style-type: none;
    margin: 5px 0;   
}

.sub-menu li  {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

.sub-menu li:first-child {
  margin-top: 0;
}

<ul class="categories">
    <li><a href="#" >All categories</a>
        <ul class="sub-menu">
            <li><a href="#">item </a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item </a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item </a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </li>       
</ul>

在hover Fiddle 上摆弄display: block