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.
