A simple HTML menu

In the blog Quirks Mode of Browsers I mentioned a " a pure CSS menu ". I figured out how to make it look the same in Firefox and IE7. But one week later I found it doesn't work in IE6, because IE6 doesn't support li:hover property.

The solution is to add javascript to modify the class from li to li:hover when the mouse is over:

< ul>
< li onmouseover="this.className+=' over';" onmouseout="this.className=this.className.replace(' over', '');">< a href="#" >File< /a>
< ul >

< li>< a href="#" >New< /a>< /li>
< li>< a href="#" >Open< /a>< /li>
< li>< a href="#">Close< /a>< /li>
< li>< a href="#">Save< /a>< /li>
< li>< a href="#">Save As< /a>< /li>
< li>< a href="#">Exit< /a>< /li>

< /ul>
< /li>
< li onmouseover="this.className+=' over';" onmouseout="this.className=this.className.replace(' over', '');">< a href="#">Edit< /a>
< ul>
< li>< a href="#">Undo< /a>< /li>
< li>< a href="#">Redo< /a>< /li>
....




then it works in all browsers.