Trouble with image rollover on wordpress horizontol menu bar

  • # October 24, 2008 at 5:52 am

    I’m having trouble on putting image rollover on the menu bar! There must me something wrong with my css.

    here is part of the css

    Code:
    #menu{
    width: 100%;
    height: 51px;
    background: transparent;
    background-image: url(Images/nav-bg.png); background-repeat: repeat-x;
    position: absolute;
    top: 0px;
    left: 0px;
    }

    #menu ul{
    list-style:none;
    position: absolute;
    top: 0px;
    right: 0px;
    }

    #menu ul li{
    float: left;
    }

    #menu ul li a{
    background-image: url(Images/navbg.png); background-repeat: repeat-x;
    margin-top: 0px;
    display: block;
    padding-left: 32px;
    padding-right: 32px;
    text-decoration: none;
    color: #1b2419;
    font-size: 11px;
    height: 51px;
    background: transparent;
    position: top right;
    }

    #menu a:hover, .current_page_item a {
    padding-left: 32px;
    padding-right: 32px;
    display: block;
    margin-top: 0px;
    height: 51px;
    color: #fff;
    font-size: 11px;
    background-image: url(Images/navhover-bg.png); background-repeat: repeat-x;
    background: transparent;
    }

    As far as I KNOW (I may not know everything you know), the css looks ok to me.

    Here is the code in the index.php

    Code:

    And here is how it looks like now
    http://sparkledreams.net/wordpress
    The link on the menu on top of the page suppose to show a green background when you roll over it. And also the links suppose to be exactly on the blue bar but it is placed slightly below the blue bar.

    Can you help me fix all this?? Your help would be much appreciated!

    Thanks in advance,
    SugarBrush

    # November 29, 2008 at 8:28 pm

    This reply has been reported for inappropriate content.

    Did you get this working?

    # November 30, 2008 at 12:44 pm

    This reply has been reported for inappropriate content.

    remember to make your links with this order:

    Code:
    link, visited, hover, active

    and you can make hover have a different image. I always do:

    Code:
    link, visited{}
    hover{}
    activ{}
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed