Here's a fairly standard menu built using style-sheet and inline <li> style. But this menu glows when you mouse over any of the menu item and dims when you mouse out. You can read about creating such menu here.
<ul> <li class="menuList"><a class="menuItem" href="../">Index</a></li>
<li class="menuList"><a class="menuItem" href="../../flash/">Games</a></li>
<li class="menuList"><a class="menuItem" href="../index.html">Tutorial</a></li>
<li class="menuList"><a class="menuItem" href="../../fpcgi/">Puzzles</a></li>
</ul>
There are many ways to attach the event handlers, and one of them is to attach them manually to every menu item. But by understanding event bubbling mechanism, we can take use it to propagation the handling of the menu at the parent level. In this case, the parent is the <ul> element.
<ul onmouseover="javascript:handleMenuMouseOver(event, 255,255,0);" onmouseout="javascript:handleMenuMouseOut(event);>
<li class="menuList"><a class="menuItem" href="../">Index</a></li>
<li class="menuList"><a class="menuItem" href="../../flash/">Games</a></li>
<li class="menuList"><a class="menuItem" href="../index.html">Tutorial</a></li>
<li class="menuList"><a class="menuItem" href="../../fpcgi/">Puzzles</a></li>
</ul>
You can see the handleMenuMouseOver() and handleMenuMouseOut() function by viewing the source of this file. They use timers and involve some unecessarily complex (because different browsers handle background-color differently). If you're interested in learning more about thie glow effect itself, you can read about it here.