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

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)

10 of 24 comments (part 2). [ « ] [ » ] [ * ]



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