homepage Welcome to WebmasterWorld Guest from 50.19.169.37
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Hover menu background
Can see behind fly-out
wa9578




msg:4323411
 1:12 pm on Jun 8, 2011 (gmt 0)

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




msg:4323418
 1:35 pm on Jun 8, 2011 (gmt 0)

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




msg:4323425
 1:43 pm on Jun 8, 2011 (gmt 0)

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




msg:4323452
 2:24 pm on Jun 8, 2011 (gmt 0)

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




msg:4323454
 2:27 pm on Jun 8, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved