• One
• Two
  • Two_1
  • Two_2
  • Two_3
  • Two_4
• Three
• Four
  • Four_1
  • Four_2
  • Four_3
  • Four_4

DHTML dropdown example

This script enhance a nested list navigation to become a DHTML dropdown. The functionality is added via Javascript and different CSS classes applied to the elements define the presentation:

dhtml

This class gets applied to the navigation UL when Javascript is available.

isParent

This class gets applied to the LI containing the nested UL to make the user aware that this is not a normal link, but a dropdown.

isActive

denotes the current open dropdown LI.

hiddenChild

hides the nested UL

shownChild

shows the nested UL

The script uses onmouseover and onmouseout as well as onclick for the functionality, and is therefore keyboard friendly.

Tested on IE6,Firefox 0.9 and Opera 7.5 on windows XP.