2013年10月24日に新しく追加された独自タグ「nav(nested)」とjQueryを用いたプルダウンメニューの実装方法を紹介します。

この方法は、独自レイアウトの場合のみ有効です。

独自レイアウトについてはこちらをご覧ください。

独自レイアウト画面「HTML」タブから「nav(nested)」を任意の場所に挿入します。

独自レイアウト画面「CSS」タブから、CSSを記入します。

独自レイアウト画面「ファイル」タブから、jQuery（jsファイル）をアップロードします。

設定「ヘッダー部を編集」から、JavaScriptを記入します。

コピー&ペーストしてご利用ください。

用途に合わせて編集してください。

「jquery-1.10.2.min.js」を使用しています。

ダウンロードはこちら

 <script type="text/javascript">
//<![CDATA[
$(document).ready(function () { 
        
        $('#nav li').hover(
                function () {
                        //show its submenu
                        $('ul', this).stop().slideDown(100);

                }, 
                function () {
                        //hide its submenu
                        $('ul', this).stop().slideUp(100);                      
                }
        );
        
});
//]]>
</script>

<div id="nav">
      <var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>
</div>
 

#nav {
 width: 958px;
 margin: 0;
 padding: 0;
 background: #4c4c4c;
 border: 1px solid #2f2f2f;
}
#nav:after {
  content: ""; 
  display: block; 
  clear: both;
}

#nav ul {
        list-style-type: none;
}

#nav ul.cc-nav-level-0 {
        width: 100%;
        *zoom: 1; /*forIE6,7*/
        margin: 0;
        padding: 0;
}
#nav ul.cc-nav-level-0:after {
        content: "";
        display: block;
        clear: both;
}
#nav ul.cc-nav-level-0 li {
        float: left;
        *zoom: 1; /*forIE6,7*/
        white-space: nowrap;
}
#nav ul.cc-nav-level-0 li ul {
        visibility: hidden;
        position: absolute;
        margin: 0;
        padding:0;
        z-index: 1 !important;
}
#nav ul.cc-nav-level-0 li:hover > ul {
        visibility: visible;
}
#nav ul.cc-nav-level-0 li ul li {
        width: auto !important;
        clear: left;
        position: relative;
}
#nav ul.cc-nav-level-0 li ul li ul {
        top: 0;
        left: 100%;
}
#nav ul.cc-nav-level-0 li a {
        display: block;
        background-color: #4c4c4c;
        border-right: 1px solid #2f2f2f;
        padding: 1.2em;
        color: #fff;
        text-align: center;
        text-decoration: none;
}
* html #nav ul.cc-nav-level-0 li a { /*forIE6*/
        zoom: 1;
}
#nav ul.cc-nav-level-0 li a:hover {
        background-color: #323232;
}
#nav ul.cc-nav-level-0 li a.cc-nav-current,#nav ul.cc-nav-level-0 li.cc-nav-parent a {
        background-color: #000000;
}
#nav ul.cc-nav-level-0 li ul li a {
        text-align: left;
}

#nav ul.cc-nav-level-1 a,#nav ul.cc-nav-level-2 a {
        background: rgb(30,30,30);
        filter: alpha(opacity=9);
        -ms-filter: "alpha(opacity=90)";
        -moz-opacity: 0.9;
        -khtml-opacity: 0.9;
        opacity: 0.9;
        text-align: center;
}

#nav ul.cc-nav-level-1 a.cc-nav-current,#nav ul.cc-nav-level-2 a.cc-nav-current {
        background: #323232;
}

.j-textWithImage figure {
  z-index: 0 !important;
}