CSS drop-down menus: keeping the top level selected when hovering over a sub-menu, now in jQuery

Awhile back I wrote a JavaScript tutorial on how to keep the top level menu item selected when hovering over a drop down menu. Since then I’ve become a strong user and proponent of the JavaScript library jQuery. Not only is it easy to use, it also can help simplify your code-base very significantly. I’ve explained the updated code below. As you can see, it is much simpler.
Read more

CSS drop-down menus: how to keep the top level selected when hovering over a sub-menu

Pure CSS-based drop-down menus are a great thing, if for no other reason than their sheer simplicity and flexibility. However, they have two main drawbacks.

  1. They don’t work in Internet Explorer 6 due to the browser’s poor support for the :hover pseudo-class.
  2. When the mouse cursor is over a drop-down, the top level navigation item does not stay highlighted under most conditions.

Fortunately, both problems can be solved with some simple JavaScript. The first problem is easily corrected with the excellent Son of SuckerFish drop-down code. The second problem can be solved using the equally small amount of code described below.

Read more