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
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    <li> menu rollover with image

    I am creating a website. Using CSS i have done a simple inline list menu. On the rollover of each menu link i want an image to appear central above the text. But i can't figure out how to do this.

    Like this... http://postimage.org/image/bstg0jv6l/

    This is what i have done so far...

    Code:
    #nav-menu ul {
    	font-weight: bold;
    	font-size: 1.2em;
    	color: #FFF;
    	list-style-type: none;
    }
    #nav-menu li {
    	margin-right: 7px;
    	display: inline;
    }
    #nav-menu li a {
    	color: #FFF;
    	text-decoration: none;
    }
    
    #nav-menu li a:hover {
    	color: #3C0D03;
    	text-decoration: none;
    }
    #nav-menu ul li a:active {
    	color: #F4A9CA;
    }

  • #2
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    CSS
    Code:
    #nav-menu li a {
    background-color: #BBBBBB;
    padding-top: 10px;
    width: 55px;
    }
    
    #nav-menu li a:hover {
    background-image: url('nx.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #00ee00;
    padding-top: 10px;
    width: 55px;
    }
    Just fill in the rest of the link states to match the link a
    Last edited by stevenmw; 02-27-2012 at 05:53 AM.

  • Users who have thanked stevenmw for this post:

    nickphonics18 (02-27-2012)

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    perfect thanks! worked a treat!


  •  

    Posting Permissions

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