Question

I have problem with simple jquery sliding menu, here is my code:

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

what I wanted to achieve is the small arrow class:

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

to appear at the same time as the submenu div. Right now as you can see it fully appear right after the submenu is fully slided Down. Should I take the arrow div out of it’s parent and show it separately? Or is there some other way It could be fixed.

thanks a lot,
S

Answer 1

The element with the slideDown will always be cropped for the duration of the animation. slideDown set overflow: hidden to the element. What you need is to move the arrow completely inside the .submenu and put the menu background to the UL instead the .submenu.

Here is the fiddle: http://jsfiddle.net/kCK44/8/

The updated 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;
}