Mobile Friendly Website


Doing it with style

Flyout menu with overlap COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

A variable height link version coming soon.
(24.10.2006, 23:32)

Works fine in Firefox2
(25.10.2006, 21:46)

Is the ">" sign in the style on purpose?

.menu :hover > a {
(05.11.2006, 20:51)

Works fine on Mac Firefox ( and Safari (2.0.4).
Doesnt work in IE 5 for Mac but why on earth would anyone care! :-)
(08.11.2006, 18:53)

Efrat, the ">" sign is required as it just styles the first link ater the .menu li:hover and will not affect any other link style.
(12.11.2006, 18:41)

Nick Lozon:-
I created a menu with the sub-menu overlapping the main menu, I redesigned it three times and finally used css' z-index to order the submenus since I wanted all submenus on top and they were ordered in which they were declared, so my selection would jump to the menu item below the submenu i was on.
(13.11.2006, 03:08)

Nick Lozon:-
As per above:
(13.11.2006, 03:09)

Danny Goovaerts:-
I've tried to use this to create a flyout menu with only two levels. I straightforwardly copied the style definition in my XHTML source.
In IE7 (7.0.5730.11), the <a> elements that directly follow a submenu have a larger height (about 4px). This makes the flyout menu not line up anymore correctly. In Firefox it works alright.
What's wrong?
You can verify my test at

Thanks very much,


P.S. Your site is great!
(26.12.2006, 19:20)

Danny, are you using dreamweaver or similar? only all the conditional comments have been stripped out of the html. These are needed for it to work correctly in IE5.5 and IE6.
You are also using the <?xml.... declaration as the first line which switches IE into quirks mode and the faulty box model. This is why the non-flyout menus are larger.
(26.12.2006, 21:10)

Danny Goovaerts:-
Stu, thanks for your (extremely) quick reply. I had not the conditional style
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
which causes the problem. After adding this, it also works even with the xml declaration. Thanks!

I'm currently "handcrafting" the HTML. I will generate it later using XSLT. That's why the conditional code is not there (to save me typing while experimenting). I will add it to the generation process later. I'm of course willing to share the XSLT when it's ready. Feel free to mail me at
(27.12.2006, 15:36)

Can this be reworked to have sub links open over a photo?
(16.01.2007, 08:34)

if i set a link tu menu and it have submenu, then ie6 work strange :s
(12.02.2007, 17:33)

Ian Young:-
If the sub menu only has a few items it doesn't reach its parent and it is not possible to catch with mouse. see menu item 3g
(12.03.2007, 23:35)

Ian, if you are referring to the previous menu where the flyouts are horizontally aligned to the top then you can move off level 3g (right) and then move up to the sub level. The menu will not collapse whilst you do this.
(13.03.2007, 09:14)

is it just me or does assigning the text hover state of the first level to bold make the flyout mess up if you do not rollover / out slowly... I.e.

.menu :hover > a {
(16.03.2007, 19:05)

I should have noted IE7 ^
(16.03.2007, 19:06)

Hi Stu
I'm having a problem in ie7
With the first flyout on 2 of the 3 options I get the vertical background border showing through. The testing site is
I've been through the code with no success. Any ideas?
(15.07.2009, 00:40)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page