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.

Ext 1.1 launched

Finally, after a long wait, Ext 1.1 is out with all the goodies like a lightweight HTML editor, improved Date Field and the Ajax class and much much more. I will be trying this out real soon. Next thing on my wishlist is definitely Ext 2.0 with its super cool window class. Ext team, you rock.

The main features of this version are

1. A very lightweight HTML Editor class
2. Improved Date Field
3. A very convenient Ajax class with global Ajax events and global headers
4. Behaviors, which let you attach listeners to tags on the basis of selectors
5. Much better documentation

You can read the blog post here.