ドロップダウンメニューは、2x2ではなく1x4のドロップダウンとして表示されます。

Question

ここで私は2x2に分割したいビットです。

 <li class="divider"></li> 
       <li class="dropdown-submenu"> 
      <a tabindex="-1" href="#"><b>Sticks</b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#"><b>Composite Hockey Sticks</b></a></li> 
       <li><a href="#">Senior</a></li> 
       <li><a href="#">Intermediate</a></li> 
       <li><a href="#">Junior</a></li> 
        <li><a href="#">Youth</a></li> 

      </ul> 
      </li> 

Answer 1

ドロップダウンメニューを2列で表示するには、マークアップを変更せずにcss列を使用できます。

.dropdown-menu { 
 
    column-count: 2; 
 
}

<li class="divider"></li> 
 
<li class="dropdown-submenu"> 
 
    <a tabindex="-1" href="#"><b>Sticks</b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#"><b>Composite Hockey Sticks</b></a></li> 
 
    <li><a href="#">Senior</a></li> 
 
    <li><a href="#">Intermediate</a></li> 
 
    <li><a href="#">Junior</a></li> 
 
    <li><a href="#">Youth</a></li> 
 
    </ul> 
 
</li>

また、liのinline-blockを構成する要素間の空白を削除し、あなたが2列

.dropdown-menu li { 
 
    width: 50%; 
 
    display: inline-block; 
 
}

<li class="divider"></li> 
 
<li class="dropdown-submenu"> 
 
    <a tabindex="-1" href="#"><b>Sticks</b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#"><b>Composite Hockey Sticks</b></a></li><li><a href="#">Senior</a></li><li><a href="#">Intermediate</a></li><li><a href="#">Junior</a></li><li><a href="#">Youth</a></li> 
 
    </ul> 
 
</li>

を作成し、それら width: 50%作ることができます

それとも、2列

.dropdown-menu { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.dropdown-menu li { 
 
    width: 50%; 
 
}

<li class="divider"></li> 
 
<li class="dropdown-submenu"> 
 
    <a tabindex="-1" href="#"><b>Sticks</b></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#"><b>Composite Hockey Sticks</b></a></li><li><a href="#">Senior</a></li><li><a href="#">Intermediate</a></li><li><a href="#">Junior</a></li><li><a href="#">Youth</a></li> 
 
    </ul> 
 
</li>

を作成するために flex-wrapとフレキシボックスを使用して li年代に width: 50%;を設定することができ