【wordpress対応】多階層メニュー

コピペでOKサンプルはこちら

<ul class="menu">
  <li>
  <a href="#" class="init-bottom">Menu single</a>
    <ul>
      <li><a href="#">Child Menu</a></li>
      <li><a href="#">Child Menu</a></li>
      <li><a href="#">Child Menu</a></li>
    </ul>
  </li>

  <li>
  <a href="#" class="init-bottom">Menu multi level</a>
    <ul>
      <!-- 第一階層 -->
      <li>
      <a href="#" class="init-right">Child Menu</a>
        <ul>
          <!-- 第二階層 -->
          <li>
          <a href="#" class="init-right">Grandchild Menu</a>
            <ul>
              <!-- 第三階層 -->
              <li><a href="#">Great-Grandchild Menu</a></li>
              <li><a href="#">Great-Grandchild Menu</a></li>
              <li><a href="#">Great-Grandchild Menu</a></li>
            </ul>
          </li>
          <li><a href="#">Grandchild Menu</a></li>
          <li><a href="#">Grandchild Menu</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

wordpressの場合そのままメニューの呼び出しコードをぺたりでOK

      <?php wp_nav_menu( array(
        'theme_location'  => 'global',
      )); ?>

スタイルシート

.menu{
	position : relative;
	width : 100%;
	height : 50px;
	max-width : 1000px;
	margin : 0 auto;
}
.menu > li{
	float : left;
	width : 25%; /* グローバルナビ4つの場合 */
	height : 50px;
	line-height : 50px;
	background : rgb(29, 33, 19);
}
.menu > li a{
	display : block;
	color : #fff;
        padding : 0 10px;
        font-size : 14px;
}
.menu > li a:hover{
	color : #999;
}
.menu > li > ul{ /* 1階層 */
	visibility : hidden;
	opacity : 0;
	z-index : 1;
}
.menu > li > ul > li > ul{ /* 2階層 */
	visibility : hidden;
	opacity : 0;
}

.menu > li > ul > li > ul > li > ul{ /* 3階層 */
	visibility : hidden;
	opacity : 0;
}
.menu > li:hover{
	background: #072A24;
	-webkit-transition: all .5s;
	transition : all .5s;
}
.menu > li > ul > li{
	border-top : 1px solid #111;
}
.menu > li > ul > li > ul li{
	border-top : 1px solid #111;
}
.menu > li > ul > li a:hover{
	background : #111;
}
.menu > li > ul > li > ul > li a:hover{
	background : #2a1f1f;
}
.menu > li > ul > li > ul > li > ul > li a:hover{
	background : #1d0f0f;
}
/* 下矢印 */
.init-bottom:after{
	content : '';
	display : inline-block;
	width : 6px;
	height : 6px;
	margin : 0 0 0 15px;
	border-right : 1px solid #fff;
	border-bottom : 1px solid #fff;
	-webkit-transform : rotate(45deg);
	-ms-transform : rotate(45deg);
	transform : rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after{
	content : " ";
	display : table;
}

.menu:after{
	clear : both;
}

.menu{
	*zoom : 1;
}
/* 単階層 */
.menu > li{
	position: relative;
}

.menu > li >ul{
	position: absolute;
	top : 40px;
	width : 100%;
	background : #072A24;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
}
.menu > li:hover >ul{
	top : 50px;
	visibility : visible;
	opacity : 1;
}

/* 多階層 ~3階層 */
.menu > li{
	position : relative;
}
.menu > li > ul{
	position : absolute;
	top : 40px;
	width : 100%;
	background : #072A24;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
}
.menu > li:hover > ul{
	top : 50px;
	visibility : visible;
	opacity : 1;
}
.menu > li > ul > li{
	position : relative;
}
.menu > li > ul > li:hover{
	background : #111;
}
.menu > li > ul > li > ul{
	position : absolute;
	top : -1px;
	left : 100%;
	width : 100%;
	background : #111;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
}
.menu > li > ul > li:hover > ul{
	visibility : visible;
	opacity : 1;
}
.menu > li > ul > li > ul > li{
	position : relative;
}
.menu > li > ul > li > ul > li:hover{
	background : #2a1f1f;
}
.menu > li ul > li > ul > li > ul{
	position : absolute;
	top : -1px;
	left : 100%;
	width : 100%;
	background : #2a1f1f;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
}
.menu > li > ul > li > ul > li:hover > ul{
	visibility : visible;
	opacity : 1;
}
.init-right:after{
	content : '';
	display : inline-block;
	width : 6px;
	height : 6px;
	margin : 0 0 0 15px;
	border-right : 1px solid #fff;
	border-top : 1px solid #fff;
	-webkit-transform : rotate(45deg);
	-ms-transform : rotate(45deg);
	transform : rotate(45deg);
}

文字色や背景色などはお好きなように変更してください

こちらを参考にしています