Forums

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

          <nav>
              <ul>
                     <li><a href="#" class="home"><div id="div1">home</a></div></li>
                     <li><a href="#" class="news">news</a></li>
                     <li><a href="#" class="contact">Contact</a></li>
                </ul>  
            </nav>
            <div id="icon" class="img">icon</div>

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.

   <li><a href="#" class="home"><div id="div1">home</a></div></li>

should be

    <li><a href="#" class="home"><div id="div1">home</div></a></li>

if you really must.

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...

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.

TheDark12

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.

treehouse : what would you like to learn today?

Forums

Css menu