Grow your CSS skills. Land your dream job.

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

    Rob
    # November 29, 2008 at 8:28 pm

    Did you get this working?

    # November 30, 2008 at 12:44 pm

    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.

*May or may not contain any actual "CSS" or "Tricks".