Question

我试图让我的WordPress Salient主题上的下拉列表停止并在某些元素上向右包装。我尝试了一些不同的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似乎相当不错。让我知道它是怎么回事。

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

1 个答案: