Mobile Friendly Website

CSSPLAY

Doing it with style

A dropdown 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}cssplay.co.uk.

Post a comment


Current posts

Roy:-
Works fine in FireFox 2 :)
(25.10.2006, 21:44)

Stu:-
...and also in Opera 8.5
I have found the trigger for this browser and will adapt my other menus to suit this earlier browser.
(26.10.2006, 11:34)

Condor:-
Wouldn't is be better to use [if IE gt 6] instead of [if IE 7] to make the XHTML valid for future versions of IE (8 and up) ?
(02.11.2006, 17:22)

Stu:-
Condor, when do you expect IE8 to be released? Hopefully when it is released IE5 and IE6 will no longer be used and we can remove the conditional comments altogether. But you can use 'gt 6' if you like.
(02.11.2006, 18:17)

Mike Ruffle:-
Hi Stu,

Great piece of coding thank you. My question is how can I have 7 top level links in a fixed width 770px wide wrapper? In effect I want equal width link boxes with no 'spare room' at the end of the menu?
(11.11.2006, 13:26)

Stu:-
Ummmm, try giving the top level <li> a width of 110px then adjust the borders and paddings to suit.
(11.11.2006, 13:35)

Mike Ruffle:-
Hi Stu,
Not sure if I went about it the right way but it seems to work. I gave class .menu a width of 100% and .menu li a width of 110px (no margin or padding). Finally I adjusted .menu a to have width 105px, padding-left 5px, and no right-border. Unfortunately it breaks down in IE - possibly due to IE box bug?
(12.11.2006, 10:23)

Paul:-
Hi Stu, Great site!
I've been looking at your menus for a while and I've been trying to get my head around them, and I think I'm about 80% there - it's identifying the hacks, I have a problem with.

Anyhow, a big problem I and others have found has been IE Select boxes overlaying DIVs and I think I may have found a solution with pure CSS, but I'm getting lost with the CSS.

What I've done, with this example, is to add an iframe to each sublevel (inside the IE conditional comments with the Tables). I've then added a css rule that displays the iframe behind the div. This almost works, I've bordered the iframes to see where they are but i'm seeing duplicates at the second layer and below they work fine. When I scroll down to the lower levels the parents then hide their iframes (select boxes then overlay again).

I think I'm nearly there, just some more fine tuning. Thought I'd see if you tried a similar approach and if so whether you'd had much luck???
(16.11.2006, 18:41)

Stu:-
Paul, there sould be no problem with the menu overlaying divs. It does this on my site. The 'Information' section is in a div and the menu drops down over this. All it may need is a relative positioning and z-index.
There is a problem with IE6 and Opera when overlaying the Gogle ads and some form elements.
(16.11.2006, 19:37)

Paul:-
Stu,
Wasn't expecting a reply so soon, thanks.

The problem browser I'm having is IE6 with form elements and this is what I hope to solve.

I've managed to use the conditional comments to add an iframe within the table of each list, and I've then got the hovers to show their relevant iframes behind the div, this has allowed the menus to work over the form elements. The problem I'm having is the iframe sizing (like to be the same size as the table/li/ul) and retaining the parent iframes as you drill down...
(17.11.2006, 09:25)

Paul:-
Here is what I have so far:

HTML
----
UL
LI
A 'Menu 1' [if IE 7]/A[end if]
[if lte IE 6]TABLE[end if]
UL
LI A /A /LI
LI A.drop [if IE 7]/A[end if]
[if lte IE 6]TABLE IFRAME.iframehack [end if]
UL
...

CSS
---
.iframehack {
visibility:hidden;
display:none;
position:absolute;
z-index:0;
height:0;
width:0; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

.menu ul li :hover .iframehack {
display:block;
visibility:visible;
left:0;
width:14em;
height:auto;
border:1px dotted #f00;
}
.menu ul ul li :hover .iframehack {
display:block;
visibility:visible;
left:12em;
width:14em;
height:auto;
border:1px dotted #0f0;}

.menu ul ul ul li :hover .iframehack {
display:block;
visibility:visible;
left:12em;
width:14em;
height:auto;
border:1px dotted #00f;
}
(17.11.2006, 11:00)

Stu:-
Paul, that really is one heck of a hack, not only conditional comments and tables now there is an iframe (not allowed on CSSplay). I'm afraid that this is all getting too much :). You will have iframes within iframes within iframes etc. Do the links open in the iframe?
(17.11.2006, 16:54)

girlleastlikelyto:-
Thanks for this :)
(01.12.2006, 22:36)

TIm Hanko:-
Stu,

This is really good stuff. I've left the comment in the style sheet and added a link here:

www.thanko.info/equipment.php

One question...

The right side of the tool bar extends to the edge of the page on my site. Is it possible to chop that off?
(22.12.2006, 01:30)

Stu:-
Tim, just change the ul background to transparent.
.menu ul {padding:0;margin:0;list-style-type:none; height:3em; background:transparent;}
(22.12.2006, 14:33)

Jesus:-
Hi, thanks for all the tips...
I agree with Paul, there is a problem with <SELECT> input forms in IE (thankfully it's fixed in 7) but for the time being we still need a hack for this. The select ignores z-index and shows above everything in the page, so the menu appears beyond any dropdowns in the page...

Please help!!!
(25.02.2007, 01:55)

gabriel:-
Hi! So, there is a hack for the <select></select> problem in IE, that doesn't support z-index and overlaps the menu? I hope there is something... There are a lot of people that are using IE 6, including myself. I also use Firefox, but we cannot ignore IE 6 users.
Thanks...
Your work is really great, Stu! God bless you!
(26.02.2007, 23:15)

Paddy:-
Can some one please post a example? I followed Paul's explanation and couldn't get it done. It would be highly helpful, if some one can paste the code or point to an existing site/example.

Many Thanks
-Paddy
(11.03.2007, 19:02)

rupnarayan:-
Does this dropdown menu support safari on mac?
(16.07.2007, 17:22)

rupnarayan:-
hi stu, sorry to say this menu does not work on safari on mac . Any solution for that?
(21.08.2007, 21:27)

Stu:-
rupnarayan, I am unable to test on a Mac, but Safari (PC) works fine. Does the next menu in the series cause problems on Safari/Mac?
(21.08.2007, 21:35)

rupnarayan:-
hi stu, sorry I am late to respond, I tested it in mac and pc both, working fine now, may be the trouble was something else, sorry for the trouble.
(30.09.2007, 19:33)

Dbcom:-
hi stu, i think this is the best css menu out there, just that it seems the only issue is with the menu appearing under 'select' form elements. You might frown upon including javascript into your menus, but here's the quickest/simplest approach I could find to troubleshooting this problem (instead of using iframe shims, etc...):

onMouseOver="document.getElementById('IDNameOfSelect').style.visibility = 'hidden';
" onMouseOut="document.getElementById('IDNameOfSelect').style.visibility = 'visible';"

and adding an ID tag to the offending 'select' form element:

<select id="IDNameOfSelect">

The other issue is that it does not include a conditional for IE6 & below.
(08.10.2007, 21:57)

Judy:-
Stu: I've looked at many of your menus and settled on this one. Right up front have to say I'm a novice CSS user so my first question is going to probably be elementary.

I've copied the code to my master.dwt (I'm using Expression 2) Have figured out how to do many things, but the one that is puzzling me the most is all the drop downs or submenus are transparent. What and where can I change the setting in the style sheet so that they aren't opaque? All for now and hope that makes sense. Thanks much,
(20.08.2009, 22:38)



Post

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://'

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page