Wordpressの水平メニューリストを作成するには？

Question

これは初めてで、まだ学習中です。

誰かが添付画像のようにメニューを作成する方法を理解するのに役立つかどうか質問したいと思います。

私はこのonmyのWordPressのサイトを使用したいので、私は離れてこのCSSだけにtodoを探しています。

アイデアは、私はこのデザインは、リストごとに3つのサブ項目を持つ単純なリストのように見えます

Answer 1

下の画像のようなメインメニュー内のすべてのリンクを一覧表示したいということです。リストスタイルを削除して&をdisplay: inline-blockに設定すると、上位2つの調整が行われ、次にサブネットからパディングを削除すると、ネストされた<ul>は左側のパディングを増加させます。

うまくいけば、これが役に立ちます。これをやり遂げるには何千もの方法があります（いつものように）。もっと意味のあるものを見つけたら、それを実行してください！

.header { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 
.sub { 
 
    list-style: none; 
 
    padding-left: 0; 
 
}

<ul class="header"> 
 
    <li>Header Item 
 
    <ul class="sub"> 
 
     <li>Sub Item</li> 
 
     <li>Sub Item</li> 
 
     <li>Sub Item</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 
<ul class="header"> 
 
    <li>Header Item 
 
    <ul class="sub"> 
 
     <li>Sub Item</li> 
 
     <li>Sub Item</li> 
 
     <li>Sub Item</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 
<ul class="header"> 
 
    <li>Header Item 
 
    <ul class="sub"> 
 
     <li>Sub Item</li> 
 
     <li>Sub Item</li> 
 
     <li>Sub Item</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

uは、メニュー項目を見ることができるように、これは私のheader.phpのファイル

... 
<div class="col-xs"> 
     <div class="menu"> 
      <button class="menu-toggle"> 
       <i class="fa fa-bars" aria-hidden="true"></i> MENU 
      </button> 
      <nav id="site-navigation" class="main-navigation" role="navigation"> 
       <?php wp_nav_menu([ 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ]); ?> 
      </nav> 
     </div> 
    </div> 
... 

に私が持っているコードで直接worpress管理パネルからロードされています。 この時点ですべてがうまくいきますが、上記の画像のようにメニューをスタイルできません。