WordPressのMenusで設定した階層型(2段階)メニューのサブメニューを開閉するサンプルのデスクトップ(desktop)版です。

wp-menu-desktop.js

jQuery( function ( $ ) {
	/**
	 * メニュー開閉制御
	 *
	 * メニューの開閉を制御します。
	 *
	 * @class Menu
	 */
	InfoTown.Menu = (function () {
		/**
		 * サブメニュー開閉設定
		 *
		 * CSSクラスsub-menu設定要素の開閉を制御します。
		 * 通常sub-menuはul要素へ設定します。
		 *
		 * @method setToggle
		 * @public
		 * @param {jQuery} target マウスオーバーされた要素(HTMLLIElement)のjQueryオブジェクトです。
		 * @param {jQuery} items HTMLLIElementのリスト(jQuery)です。
		 * @param {Object} options fadeIn, fadeOutへ渡すオプションです。
		 *   @param {Number} options.duration サブメニュー表示スピードです。
		 *   @param {String}  options.ease サブメニュー表示エフェクトです。
		 * @returns {Boolean} falseを返します。
		 */
		function setToggle( target, items, options ) {
			var initial, submenu;
			target = (target instanceof jQuery) ? target : $( target );
			initial = {
				duration: 300,
				ease: "swing"
			};
			options = options || initial;
			submenu = target.children( ".sub-menu" );
			/* マウスオーバー処理 */
			target.on( "mouseenter", function () {
				items.each( function () {
					$( this ).children( ".sub-menu" ).hide();
				} );
				submenu.slideDown( options );
				return false;
			} );
			/* マウスリーブ処理 */
			target.on( "mouseleave", function () {
				submenu.css( {
					"display": "none"
				} );
				return false;
			} );
		}

		/* パプリッックメソッド */
		return {
			setToggle: setToggle
		}
	}());
} );

wp-menu-desktop.scss

/*doc
---
title: Menu global
name: menu-global
category: Default
---

This class define Global menu style.

```html_example
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="menu">
        <ul id="menu-global" class="menu-global">
          <li class="menu-item"><a href="#">メニュー1</a></li>
          <li class="menu-item"><a href="#">メニュー2</a>
            <ul class="sub-menu">
              <li class="menu-item">メニュー2-1</li>
              <li class="menu-item">メニュー2-2</li>
            </ul>
          </li>
          <li class="menu-item"><a href="#">メニュー3</a></li>
        </ul>
      </div>
      <!-- .menu -->
    </div>
    <!-- .col-lg-12 -->
  </div>
  <!-- .row -->
</div>
<!-- .container -->
```
*/
.menu {
  clear: both;
}

.menu-item {
  float: left;
  list-style-type: none;
  a {
    display: block;
    padding: 1em 1.5em;
    &:link {
      text-decoration: none;
    }
    &:hover {
      text-decoration: none;
    }
  }
}

.menu-global {
  position: relative;
  margin: 0;
  padding: 0;
  background: #eee;
  > .menu-item a {
    padding: 0.875em 1.5em;
    border-right: 1px solid #ddd;
  }
  > .menu-item:last-child a {
    border-right: none;
  }
}

.sub-menu {
  z-index: 5;
  position: absolute;
  top: 56px; /* leftはJavaScriptで設定 */
  width: 200px !important;  /* 案件により変更する箇所 */
  display: none;
  margin: 0;
  padding: 0;
  background: #eee;
  li {
    float: none;
  } 
  > .menu-item a {
    padding: 0.375em 1.5em;
  }
}