Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with hover navigation

    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?

    Code:
    #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;
    }
    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Code:
    #nav a:hover b{
    	color:red
    }
    #nav a:hover i{
    	color:blue
    }
    Should do the job with your markup

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Code:
    #nav a:hover b{
    	color:red
    }
    #nav a:hover i{
    	color:blue
    }
    Should do the job with your markup
    Oke, it worked. Thank you!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •