CSS Dropdown Disappears when moving mouse from parent element towards drop down

HTML & CSS
1

Hi,

Am getting very frustrated with this pure CSS drop down on a site we have in development - Welcome to Charnwood

There are 2 issues - 1. that when you move down from the parent element “Products” towards “The Tor Range” the option disapears. I assume this is due to the gap for the lighter green line? is there a way around this?

Secondly, I have actually defined several items in the drop down, but only the first one is showing?

Any ideas? I’m going mad with this one!

2

Regarding problem 1, make sure there’s no gap between the top link and the sub list:

.nav ul {
  height: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  [COLOR="Red"]top: 31px;[/COLOR] /* remove */
}

You’ll need to find a better solution if you want a visual gap.

For problem 2, one thing getting in the way is the “display: none” on all of these (which isn’t being overridden on hover):

.p2 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 101;
}
.p3 {
   [COLOR="Red"] display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 102;
}
.p4 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 103;
}
.p5 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 104;
}
.p6 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 105;
}
.p7 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 106;
}
.p8 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 107;
}
.p9 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 108;
}
.p10 {
   [COLOR="Red"] display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 109;
}
.p11 {
    display: none;
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 110;
}
.p12 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 111;
}
.p13 {
    [COLOR="Red"]display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 112;
}
.p14 {
   [COLOR="Red"] display: none;[/COLOR]
    height: 554px;
    position: absolute;
    width: 594px;
    z-index: 113;
}

Basically everything above is redundant. Just set the show/hide styles on the sub UL.

3

Thanks for the reply.

The display:none; bits were for a completely different bit of the site and I hadn’t noticed the same class names were being used! Have now renamed the menu items to dd1 dd2 etc…which has solved that issue.

I do however need the visual gap between the main menu item and the first item in the drop down. What kind of solution would you be thinking of? Can this still be done purely with CSS? There’s so much Javascript going on with this site that any JS dropdowns we’ve used either don’t work or they stop something else from working.

Cheers,

Dan

4

It’s easy to do via Firebug, but I keep losing track of the changes. Basically, though, remove the top/bottom paddings etc on the top-level LI and a, and instead set a line height on the a that makes it fill the black nav area. Then perhaps you could put a green border on top of the sub UL that overlaps the green border of the nav area. There are perhaps better ways, but that’s a quick solution. The same question came up a day or so ago, and Paul O’Brien had a nice solution using background-clip. I’ll see if I can find it.

5

Actually…think I’ve solved it thanks. Taken the top:31px out as you suggested and put some padding on the nav class…now to check in other browsers!

Thank you.

Dan

6

OK, here was that link anyway: