Question

I have this code:

 $(document).ready(function () {
     $(this).hoverAccordionMenu(); //build left menu accordion effects  

     /*ie6 hack for mouse over icons on 2nd level. Not part of the plugin. optional!*/
     if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
         //rollover arrow which doesn't work with simple css
         $('ul.menu > li > ul > li').bind("mouseenter", function (e) {
             $(this).css("background", "url(ico-arrow-level2.gif) no-repeat");
         });
         $('ul.menu > li > ul > li').bind("mouseleave", function (e) {
             $(this).not(".active").css("background", "none");
         });
     }

 });

I’ve put in to a jsfiddle to show you:

http://jsfiddle.net/haNGY/

Could anyone tell me why the slide up and down has a jolt rather than being smooth?

Thanks in advance!

(PS, Sorry, just remembered about the title, but it’s nearly 4am here so my brain is on a go slow! Just went to edit it but it’s been fixed, thanks!)

Answer 1

To fix the jumps just do:

#menu ul li ul {
    width:235px;
    /* display: inline-block ;*/ /* REMOVE */
}

Now just something useful

#menu li {
    margin: 0;
    /*margin-left:0; */ /* believe me you don't need this */
}

#menu li li {
    padding-top:2px;
    padding-left:9px;
    /*margin:0;*/ /* why if you already use margin 0 for LI*/
}

Here is also 4:49am so take a better look at the CSS… tomorrow 😉

Yeah, additionally I avoid styling the LI elements. It’s not good and not always Xbrowser compatible. It’s always better that you use your LI elements like dummy containers keeping minimal styling. Play with a elements inside to achieve the desired style.