Question

I’m trying to create some drop down elements with CSS and jquery. Here’s what I’m trying to achieve:

• When mouse hovers over a particular word in a sentence the background
  colour of the word is altered and a drop down appears with a few
  options (using same background colour).
• The background colour of the original highlighted word should hold
  when hovering over the options below.
• Upon leaving the drop down it should return to hidden and the
  original word should return to a background color of transparent.

The solution I have at the moment doesn’t work perfectly. Hovering sometimes causes the drop down to flicker a bit. I’m wondering if anyone could suggest some better approaches?

I think what I’ve done is a bit of a hack really. I’m unsure how to select the specific li element that the user hovers over originally so I can alter the bg colour of that particular element (without specifically assigning IDs to every parent li). So instead I simply change all li elements to transparent upon leaving the dropdown and then have to change all elements to the blue bg colour if the word is highlighted again. Also when hovering over sub items I’m effectively changing the bg colour each time which also doesn’t seem the best way to do it.

Here’s the javascript:

     $('#nav li').hover(
    function () {

       $(this).css('background-color', '#A7B7FF'); // to set parent item to  blue
        $('ul', this).css('background-color', '#A7B7FF'); // set sub items to  blue
        //show its submenu
        $('ul', this).css('z-index', '600'); // so it overlaps other drop down below
        $('ul', this).slideDown(100);

    },
    function () {
        //hide its submenu

        $('ul', this).slideUp(100,
            function() {

               $('li').css('background-color', 'transparent'); // callback so parent item returns to transparent


            }
        );
    }
);

For a full example look here: http://jsfiddle.net/A4r2m/1/

Many Thanks

Answer 1

I throttled the hoverleave for 500 milliseconds, so it won’t flicker. This also means it takes 500 milliseconds for the menu to disappear after the user has left the area so user can accidentally leave the area for a bit and then come back and it won’t have to animate all over again.

edit: I needed to add cancel to the throttled hoverOut.

http://jsfiddle.net/A4r2m/4/