I know I did this a while back but for the life of me I can’t find the post here or the site I did it on. I was something about a background image set behind CSS drop down menus allowed you to put a margin between the drop down list items and IE wouldn’t close the list if the cursor hit that margin.
Anyone point me in the right direction?
Something else is probably at play then :). Got a link?
DUH, yeah that was it! Told you I had forgotten it (sucks getting old)
Thanks bud, always a pleasure
Hey Paul!
I tried this (yeah I remembered what it was 10 seconds before you replied):
ul#navigation {
width: 1004px;
height: 57px;
background: transparent url(/images/green-menu-bg.jpg) no-repeat right top;
list-style-type: none;
}
ul#navigation li {
float: left;
background-image: url(images/fake.gif);
}
Now I can’t set the background image on navigation to negatives because it actually is the menu background
BUT IE 8 is ignoring it, if your cursor hits one of the margins the menu closes :mad:
Yes you can apply a background colour to the parent ul that holds the dropdown and that usually stops the menu from flicking off between the list item gaps.
If you can’t use a background color then use a fake gif trick.
ul {background:url(fake.gif) no-repeat -1px -1px}
The image doesn’t actually have to exist but to avoid missing images in your server log just make a 1px x 1px fully transparent gif instead.
No you need the image on the dropdown ul which you haven’t got an image on.
ul.inner {
position: absolute;
left: -2999em;
top: 100%;
list-style: none;
z-index: 100;
background:url(fake.gif) no-repeat -1px -1px;
}
That works for me in IE8.
Odd, because I just checked a few other sites I did that have drop downs … some do it some don’t.
Here’s one that it doesn’t happen on:
Strange indeed!
Hi, I believe hte problem is you set a 1px bottom margin on the <li>'s and upon hovering of that you are hovering upon the actual content of hte page and as a result the hover is lost
ul#navigation ul.inner li
If you need that 1px bottom margin (what I mean is, if you need that color that gets shown through) then add it as part of an image and place it upon the <li>'s 
It’s not that a big deal though and I like the look better without that whitish there
It’s not that
Nope, still does it (IE 8 at least, haven’t checked the others)
password protected (my test domain for client builds)
user: test
password: test
Hi, untested, but it probably just needs a top coordinate set :). You should also make the hover set left:0 instead of auto (it can screw up the alignment in browsers (IE) since they have to guess where to place it and placement can be influenced via stuff like text-align
ul#navigation li {
float: left;
[color=red]position:relative;[/color][color=blue]/*Set stacking context for Ap submenu*/[/color]
background-image: url(images/fake.gif);
}
ul.inner {
position: absolute;
left: -2999em;
[color=red]top:100%;[/color][color=blue]/*set it 100% of the way down the li*/[/color]
list-style: none;
z-index: 100;
}
ul#navigation li:hover ul.inner, ul#navigation li.sfhover ul.inner {
left: [color=red]0[/color];[color=blue]/*safer*/[/color]
}