...

View Full Version : Problem with hover navigation



RDLyTN
08-02-2012, 01:22 PM
Hello,

I'm making a new website, but I have a little problem with the navigation.
Each item of my navigation consists of 2 lines and I want a hover that my first line is an other color than my second line. How can I do this?



#nav ul {
list-style: none;
}

#nav li a {
text-decoration: none;
display: block;
float: left;
color: #000;
}

#nav li.home {
margin-left: -40px;
}

#nav li.about a {
margin-left: 80px;
}

#nav li.portfolio a {
margin-left: 493px;
}

#nav li.contact a {
margin-left: 80px;
}




<div id="nav">
<ul>
<li class="home">
<a href=""><b>HOME</b><br /><i>Start</i></a>
</li>
<li class="about">
<a href="about"><b>YANNICK LUIJTEN</b><br /><i>What about me?</i></a>
</li>
<li class="portfolio">
<a href="portfolio"><b>PORTFOLIO</b><br /><i>My work</i></a>
</li>
<li class="contact">
<a href="contact"><b>CONTACT</b><br /><i>Say hello!</i></a>
</li>
</ul>
</div>

SB65
08-02-2012, 01:43 PM
#nav a:hover b{
color:red
}
#nav a:hover i{
color:blue
}

Should do the job with your markup

RDLyTN
08-02-2012, 02:03 PM
#nav a:hover b{
color:red
}
#nav a:hover i{
color:blue
}

Should do the job with your markup

Oke, it worked. Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum