如何让我的 WordPress 下拉菜单停止/换行并向右移动？

Question

我正在尝试让我的 WordPress 突出主题上的下拉列表停止并在某些元素上向右换行。我尝试了一些不同的 css 东西，但到目前为止还没有运气。

我认为我需要编辑的课程是：

.sf-menu a {

display: block;
position: relative;

HTML：

<ul class="sub-menu" style="display: none;">
    <li id="menu-item-59258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59258"><a href="https://myunion.edu/academics/bachelors/business-management/">Business Management</a></li>
    <li id="menu-item-59259" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59259"><a href="https://myunion.edu/academics/bachelors/child-and-adolescent-development/">Child &amp; Adolescent Development</a></li>
    <li id="menu-item-59260" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59260"><a href="https://myunion.edu/bachelors-degree/criminal-justice-management/">Criminal Justice Management</a></li>
    <li id="menu-item-59261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59261"><a href="https://myunion.edu/academics/bachelors/early-childhood-studies/">Early Childhood Studies</a></li>
    <li id="menu-item-59264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59264"><a href="https://myunion.edu/academics/bachelors/elementary-education/">Elementary Education</a></li>
    <li id="menu-item-59265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59265"><a href="https://myunion.edu/academics/bachelors/emergency-services-management/">Emergency Services Management</a></li>
    <li id="menu-item-59266" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59266"><a href="https://myunion.edu/academics/bachelors/exceptional-student-education/">Exceptional Student Education</a></li>
    <li id="menu-item-59267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59267"><a href="https://myunion.edu/academics/bachelors/maternal-child-health/">Maternal Child Health: Human Lactation</a></li>
    <li id="menu-item-59268" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59268"><a href="https://myunion.edu/academics/bachelors/organizational-leadership/">Organizational Leadership</a></li>
    <li id="menu-item-59269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59269"><a href="/academics/bachelors/psychology/">Psychology</a></li>
    <li id="menu-item-59270" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59270"><a href="https://myunion.edu/academics/bachelors/secondary-education/">Secondary Education</a></li>
    <li id="menu-item-59271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59271"><a href="https://myunion.edu/academics/bachelors/social-work/">Social Work</a></li>
</ul>

Answer 1

假设我正确理解了您的问题，请将其添加到您的 CSS 中，看看是否是您所追求的

.submenu .submenu{
          -webkit-column-count: 2; /* Chrome, Safari, Opera */
          -moz-column-count: 2;
           column-count:2;
          -webkit-column-gap:0;
          -moz-column-gap:0;
           column-gap:0;
           width:32em;
}

我在上面使用的column-* 属性的support 似乎相当不错。告诉我进展如何。