Adding a drop down menu

I’m using tabbed navigation menus on my site. I’d like to add a drop down menu to the ‘products’ tab, something like Widget1, Widget2, Widget3, etc. I’ve tried to get it to work but I’m just not getting it.

Here’s a very stripped down version of the site:
http://64.58.198.103/www.PRACTICE_MENUS.com/home.html

When the mouse moves over the rectangular ‘products’ box, a drop down menu should appear.

Any help would really be appreciated.

Thanks,
Mike

Have a look at the SCTI website I did a while back, which does what you want. It uses semantic markup for the menu (nested lists) and JavaScript to react to mouseover/mouseout’s by hiding/showing the sublists. CSS positions the menus. The script (/js/scti.js) could be taken one step further by using event delegation + target identification instead of attaching handlers to every single top-level menu item.

‘HTH

Hi Christophe,

Thanks for the reply. I think I understand what you’re saying. The problem is I don’t know CSS well enough to grab the relevant bits from the site you recommend. I’m having trouble integrating it with the CSS on my site. I’m really new at this. I’ve tried several times to make it work on my site, but I end up screwing up my site.

Mike

Hey Mike,

Essentially, you should try and style your menu items so that they appear in the proper positions by default, all shown. Use a first-level list for the top navbar, and inner lists inside the <li>’s that have submenus. Then, you should hide the inner lists by default (using inline style="display: none;"), and toggle them using mouseover/mouseout on the relevant <li>’s in the top list.

The markup would go like this:

<ul id="navBar">
  <li><a href="…">No Sub Menu</a></li>
  <li>
     <a href="/cat2">Submenu here</a>
     <ul id="cat2">
       <li>Subitem 1</li>
       <li>Subitem 2</li>
       …
     </ul>
  </li>
  …
</ul>

Then you should style those using a position: relative for list items, and a position: absolute with proper top/left positioning for inner lists. Perhaps something alone these lines:

#navBar li { position: relative; height: 1em; padding: 0.5em; }
#navBar li ul { position: absolute; top: 2em; left: 0; }
…

When it renders well on all browsers you want to support, add the inline hiding and event-based hide/show calls.

‘HTH