前提・実現したいこと
wordpressでlightningテーマを利用して作っています。
ナビゲーションの子メニューが多いのでドロップダウンで3カラムにしたいです。
CSSで子メニューがあるもの全てを3カラムのドロップダウンにすることはできたのですが、
文字数の関係等で、5つあるメインメニューのうち、1つだけ3カラムのドロップダウン子メニューにできる方法を探しています。
発生している問題・エラーメッセージ
なし
該当のソースコード
HTMLは下記のようになっています。
<div id="gMenu_outer" class="gMenu_outer"> <nav class="menu-8-container"><ul id="menu-8" class="menu gMenu vk-menu-acc vk-menu-acc-active"><li id="menu-item-3409" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="http://test.net"><strong class="gMenu_name">ホーム</strong></a></li> <li id="menu-item-3431" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://test.net/about-2/"><strong class="gMenu_name">紹介</strong></a> <span class="acc-btn acc-btn-open"></span><ul class="sub-menu acc-child-close"> <li id="menu-item-3662" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/%b6/">挨拶</a></li> <li id="menu-item-3667" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/%93%/">about</a></li> </ul> </li> <li id="menu-item-3434" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/3%87/"><strong class="gMenu_name">お話</strong></a></li> <li id="menu-item-3436" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://test.net/1%/"><strong class="gMenu_name">お問い合せ</strong></a></li> <li id="menu-item-3766" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#"><strong class="gMenu_name">リスト</strong></a> <span class="acc-btn acc-btn-open"></span><ul class="sub-menu acc-child-close"> <li id="menu-item-3891" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="https://rrrrrr.com">子メニュー1</a></li> <li id="menu-item-3767" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com/">子メニュー2</a></li> <li id="menu-item-3768" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー3</a></li> <li id="menu-item-3769" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー4</a></li> <li id="menu-item-3770" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー5</a></li> <li id="menu-item-3771" class="menu-item menu-item-type-custom menu-item-object-custom"><a target="_blank" href="http://www.rrrrrr.com">子メニュー6</a></li> </ul> </li> </nav></div>現状CSSはこうしてみました。
.sub-menu{
column-count: 3
}
これだとサブメニューが全部3列になってしまいます。
wordpressのメニュー作成時に3列にしたいメニューのclassを3colとつけました。
このclass名だけ3列のサブメニューにすることは可能でしょうか。
補足情報(FW/ツールのバージョンなど)
lightning 子テーマ
ここにより詳細な情報を記載してください。

バッドをするには、ログインかつ
こちらの条件を満たす必要があります。