jquery - jquery自定义滑动菜单

Question

我对简单的 jquery 滑动菜单有疑问，这是我的代码：

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

我想要实现的是小箭头类：

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

与子菜单 div 同时出现。现在，您可以看到它在子菜单完全向下滑动后立即完全显示。我应该将箭头 div 从其父级中取出并单独显示吗？或者有没有其他方法可以解决。

十分感谢

Answer 1

带有 slideDown 的元素将始终在动画期间被裁剪。slideDown 设置溢出：隐藏到元素。您需要将箭头完全移动到 .submenu 内，并将菜单背景放到 UL 而不是 .submenu 中。

这是小提琴：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;
}