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

Question

我正在尝试在我的WordPress Thient主题上获取下拉列表，以在某些元素上停止并向右包装。我已经尝试了一些不同的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-*属性的支持似乎相当不错。让我知道它是怎么回事。