CSS-JS Hybrid Multi-level Menu

Hi everyone,

I have been working on my personal implementation of a CSS menu to brush up my CSS. You can download the source from here. I must declare here that I modified and used the javascript code from some other implementation. I cant recall from where but I will find out and update this post.

I wanted the menu to be simple to implement and also standards compliant. I wanted the HTML to be no more than a simple nested UL, and so it is. So, I set off to make the menu.

It has always been a tough experience with IE, and yet again I found myself running for hacks to make IE work. My implementation requires a mouseover event on LI, so “li:hover” should work, RIGHT?…… WRONG. In IE “:hover” pseudo class is only applicable to anchor tags. So I had to include a conditional javascript block to attach event handlers to the mouseover and mouseout events of the LI element for IE.

For other browsers I have implemented similar behavior using CSS using the famous “html > body” hack.

The menu is working just fine, except for one thing. The borders of the parent menu are showing through the submenu, in spite of the “z-index” setting. Just look at the snapshots below.

IE

Firefox and other browsers

Still figuring out how to solve it. I would love to receive your feedback.

[Update] The IE bug is solved. Download the latest version from here. Thanx to Lalit.