I thought it would be easy to find. All I needed was some CSS that would generate a nice vertical flyout menu for a site I’m developing. Turns out that’s not such an easy request. I googled around and found several different menu systems that looked great in Firefox, and didn’t work at all in IE. I was about to give up (which I hate to do) when I found the ADxMenu via a post in Veerle’s blog. Not only does Aleksandar provide the CSS for 4 different menu layouts, but he also includes some really thorough documentation. There is a small script that’s required as well, to address the gaps in IE, but the end result is a menu with complete cross-browser functionality.

[sigh of relief…]

Thanks for your comments on the previous post Char and David.


Start with the building blocks of educationg with kids learning games. Making education fun is a great way to help your child work towards and eventual college education. Everyone could use a little bit of math help early on and there are lots of online activities available.



You might also like:
  • How to hide pages and rearrange your menu in WordPress
  • Performancing for Firefox- review
  • How to make your backgrounds transparent using CSS
  • Did you like this post? How about subscribing in a reader or via e-mail.


    12 Responses to “A CSS flyout menu that works in Firefox AND IE”

    1. 1 MyAvatars 0.2 Char

      I can’t wait to see it! It is going to be awesome, I just know it.

    2. 2 MyAvatars 0.2 Leah Maclean

      Thanks for sharing this one Randa. I have been using an add-in for Dreamweaver but this looks good.

    3. 3 MyAvatars 0.2 Thomas Fjordside

      Wow thanks for sharing, I’ve been looking for that for a long time. I found a danish site that had something like that. Works in the same way.

    4. 4 MyAvatars 0.2 Craig

      If you ever wanted to go nuts with menus, or just about any other kind of “effect” linking, you HAVE to check out Stu Nicholls’ CSSPlay at http://www.cssplay.co.uk/menus/

    5. 5 MyAvatars 0.2 Game News

      Thanks for sharing! This might be quiet amazing considering the lack of my artistic skills :)

    6. 6 MyAvatars 0.2 SirCommy

      Have gotten tired of FF and IE differences. Thanks for sharing this one!

    7. 7 MyAvatars 0.2 Chris Boswell

      Stu Nichols’ CSS flyouts get my vote too. The implementation of these pure CSS menus and the IE fix are sheer genius.

      I’m also a great fan of Slidy and S5 both pure HTML/CSS multi-media presentations .

    8. 8 MyAvatars 0.2 Rob

      Stu Nicholls site is a fantastic resource. CSS is such a nice way to implement a menu system, but with the inconsistencies of browsers (particularly IE) it’s such a headache.

      Thanks for pointing out this solution, it saves us web designers a lot of migraines!

    9. 9 MyAvatars 0.2 Craig

      So true Rob.

      I get a migraine just thinking about the migraines IE-6 gives me! :-()

      But, I’ve learned that after a while of dealing with IE-6 that one can begin to do layouts that take IE-6’s quirks out of the picture.

      One simple example, IE-6’s doubling of margins when a margin and float are in the same direction. Instead of using margin, just use padding and the problem goes away.

      Of course that doesn’t work all the time but I’ve found that with some planning and understanding of IE-6’s problems, complex layouts can be had without a single “hack”.

      But then again, when all else fails, the “hack” I like the best is to put an underscore in front of a property name, which then only IE-6 will see. That I use only for testing though, for the final layout I’ll move all the IE-6 only properties and values to an IE-6 only style sheet and then Conditional Comment it in.

    10. 10 MyAvatars 0.2 Rob

      Good thinking Craig.

      I try to avoid using too many hacks, but sometimes it’s unavoidable. I use conditional comments to load a transparent PNG image hack for IE6 and IE5.5.

      However, another thing I like to do is reset CSS files. I wrote a quick tutorial about it on my site. You might find it useful.

    11. 11 MyAvatars 0.2 Komik Sözler

      Verlee always come up with great things! I wish she wrote more of her awesome tutorials.

    1. 1 Front End Webdesign.. | Perfidy