Hover menu background

Can see behind fly-out

[wa9578]

Hi all,

I've been trying to add a side bar to my current design, and although nearly got it (pop outs and stuff all work), I have one issue :(

When you hover over the list and get the pop out, you can see the text thats on the page (behind the pop out).

I've probably missed something really simple out but I can't find it :s

the css is this

.sidebar1 {
float: left;
width: 150px;
background: #fff;
padding: 10px 0;
border: 0 1 0 0 solid #f00;
z-index:-1;
}
.sidebar1 ul {
list-style:none;
margin: 0;
padding: 0;
}

.sidebar1 a {
font-family:"Comic Sans MS", cursive;
font-size:16px;
display:block;
border-bottom: #F00;
border-style:solid;
border-width:1px;
margin: 0;
color:#000;
text-decoration:none;

}

.sidebar1 a:hover{
color:#fff;
background:#F00;
}

.sidebar1 ul ul ul {
position:absolute;
top: 0;
left: 0;
}
.sidebar1 ul {
position: relative;
}
.sidebar1 ul ul ul {
position: absolute;
top:0;
left:100%;
width:100%;}

.sidebar1 ul ul ul {
display:none;
}
.sidebar1 ul ul li:hover {
display:block
}

.sidebar1 ul ul ul,
.sidebar1 ul ul li:hover ul ul {
display:none;
}
.sidebar1 ul ul li:hover ul {
display:block
}

.sidebar1 ul ul ul,
.sidebar1 ul ul li:hover ul ul {
display: none;
}
.sidebar1 ul ul li:hover ul,
.sidebar1 ul ul ul li:hover ul {
display:block;
} 

the colours and everything are how i want it, just don't want the background coming through the pop out. (you also can't see it when you hover over pop out).

Thanks in advance (think it just needs fresh eyes)

[alt131]

Hi wa9578 - is this the same menu? It's really being troublesome ;)

There can be issues with absolutes and z-index, but a quick scan of your code, and I can't see a background-color applied to the "pop-out". Remember background-color isn't inherited and is transparent by default, so should be explicitly set.

[wa9578]

Kinda... although not quite lol, I've just applied the same rules (kinda). I knew it would be something like the background colour but... which bit do i add it to?

am guessing will be background-color:#FFF

you'll see on there too that it has a red border at the bottom, and a black border at top and sides (need the black one to go)

[edited by: alt131 at 2:47 pm (utc) on Jun 8, 2011]
[edit reason] Tidy [/edit]

[alt131]

For those wondering about the cryptic messages, this menu is a frequent visitor to the forum. The last time was Call Card CSS [webmasterworld.com] which also links to earlier html and styles.

But you're doing well wa9578! Quite correct about the background-color, and after a quick scan, add it to the nested ul on hover. That should be this selector group:
.sidebar1 ul ul li:hover ul, .sidebar1 ul ul ul li:hover ul {...}

For the black border, in the posted code you've declared
.sidebar1 a {
...
border-bottom: #F00;
border-style:solid;
border-width:1px;
...
}

That orders a solid, 1px border on all sides. You don't want that, so delete all three property/values. However, some of the code for borders is invalid, so I think time to check the recommendations on Border properties (8.5) [w3.org] Note especially border shorthand in section 8.5.4

[wa9578]

lol i was just about to post saying i've fixed the background :P

.sidebar1 ul {
list-style:none;
margin: 0;
padding: 0;
background-color: #fff;
}

or least that seems to have worked, will do the border now :) thanks for your help as always alt