Css menu

[phatzis]

hi everyone,

i try to create a menu when you are over menu button in another div in the page the bg color change.

this is the Html code

• home

• news
• Contact

icon

And here is the css i dont give you the whole menu

#icon{float:right; width:200px; height:100px;}

nav ul { list-style: none; margin: 0 0 5px 0;
font-family:”Courier”, “New Courier”, “Monospace”, Helvetica, Arial, “Lucida Grande”, sans-serif; font-weight:bolder;}

nav li { text-decoration:none; overflow: visible !important; font-size: 14px;
font-style:bold; width: 230px; display: block; color: black;
position: relative; left: 0px; text-indent: 15px;
font-family:”Courier”, “New Courier”, “Monospace”, Helvetica, Arial, “Lucida Grande”, sans-serif; font-weight:bolder;
text-transform:uppercase;}

nav li a {text-decoration:none; overflow: visible !important; font-size: 14px;
font-style:bold; width: 230px; display: block; color: black;
position: relative; left: 0px; text-indent: 15px;
font-family:”Courier”, “New Courier”, “Monospace”, Helvetica, Arial, “Lucida Grande”, sans-serif; font-weight:bolder;
text-transform:uppercase;}

nav li a:hover{ text-decoration: none; color: white; background-color:black; }
nav li a:hover span{ background-color: black; color: white; }

#div1:hover ~ #icon{
background: blue;
}

Any idea why its not working inside list? i have tried it and working without a list but i have to use list for this.

[Paulie_D]

My first question is why do you have a div inside a list item.

I know under HTML5 you can…but why?

Also, it’s structured incorrectly.

[phatzis]

sure can remove the div

and sure i could use this code in css
nav li a:hover ~ #icon{
background: blue;
}

but the problem is that dosent work with list items

[phatzis]

this is an example that works with divs but not with lists
[Your text to link here…](http://jsfiddle.net/6BfR6/94/ “example”)

[Paulie_D]

I’m not sure what you are trying to do.

You’re trying to change the background color of your #icon div when a particular list item/link is hovered…is that right?

[phatzis]

yes exactly

[Paulie_D]

Given the structure you are proposing, I don’t think it’s possible with CSS as the icon div is not ‘related’ to the list item or the anchor.

[chrisburton]

If anything, use a span not a div.

[Anonymous]

This looks like a job for jQuery!

Also I agree with Chris here, use a span instead inside the list item.

[phatzis]

i have tried also with span not wornking also i give a shot to jquery

[chrisburton]

What I would do is give the body a unique class for each anchor to trigger. Then, apply the bg color in CSS.

[Author]

Posts