jquery - jqueryカスタムスライドメニュー

Question

シンプルな jquery スライド メニューに問題があります。ここに私のコードを示します。

http://jsfiddle.net/kCK44/1/

私が達成したかったのは、小さな矢印クラスです:

<div class="arrow"></div> 

サブメニュー div と同時に表示されます。ご覧のとおり、サブメニューが完全に下にスライドした直後に完全に表示されます。親から矢印divを取り出して、個別に表示する必要がありますか? または、他の方法で修正できますか。

どうもありがとうございます

Answer 1

アニメーションの期間中、slideDown を持つ要素は常にトリミングされます。slideDown は、overflow: hidden を要素に設定します。必要なのは、矢印を .submenu 内に完全に移動し、メニューの背景を .submenu の代わりに UL に配置することです。

これがフィドルです：http://jsfiddle.net/kCK44/8/

更新された CSS:

.pageNavigation .mainNavigation ul li .submenu {
   min-width: 110px;
   display: none;
   position: absolute;
   top: 33px;
   left: -10px;
   z-index: 500;
}
.submenu .arrow {
   top:0px;
   left:33px;
   position: absolute;
   z-index: 9999;
   width:25px;
   height: 23px;
   background: #33ccff;
}
.pageNavigation .mainNavigation ul li .submenu ul {
   background: #ce3102;
   text-align: left;
   list-style-position: outside;
   list-style-image: none;
   list-style-type: none;
   margin: 15px 8px 5px;
   z-index: 500;
}