Forums

SugarBlush

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

#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

<div id=\"menu\">
       <ul>
       <?php wp_list_pages('depth=1&title_li='); ?>
       </ul>
       </div>

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

Robskiwarrior

Did you get this working?

ikthius

remember to make your links with this order:


link, visited, hover, active

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


link, visited{}
hover{}
activ{}

treehouse : what would you like to learn today?

Forums

Trouble with image rollover on wordpress horizontol menu bar