how to implement drop down menus in the easiest way possible. Unfortunately, most CSS drop down tutorials still require you to add javascript to resolve IE6 issues. CSS menus require the ":hover" attribute on LIs, and IE6 just can't handle it. I figured since Drupal already includes jQuery, I'd write a tutorial that takes advantage of jQuery's simplicity and keeping the CSS to a minimum for ease of maintenance.
The first thing I did was create my menu structure.you'll need to ensure all the menu items are set to expanded (which makes sure they are all rendered when the menu is sent to the theme layer).
Next, I added the following CSS.As you can see, I'm using the unique identifier on the primary link block in this example. Check out the CSS comments to better understand what each line of CSS does. This CSS works with any number of child menus. NOTE: If you wanted your menus to scale with the font size, you could replace all the measurements with "ems".
/* remove any previously set margins and paddings */
#block-menu-primary-links * { margin: 0; padding: 0; }
/* set width/height on
, ,
