WordPress.org

Support

Support » Themes and Templates » Trouble with image rollover on WordPress horizontal menu bar!

Trouble with image rollover on WordPress horizontal menu bar!

  • I’m having trouble on putting image rollover on the menu bar!
    I don’t know if I did wrong to the css or anything but it just won’t work!

    here is part of the css

    #menu{
          width: 100%;
          height: 51px;
          float: right;
          background: transparent;
          background-image: url(Images/nav-bg.png); background-repeat: repeat-x;
          position: absolute;
          top: 0px;
          left: 0px;
    }
    
    #menu ul{
          list-style:none;
    }
    
    #menu ul li{
          float: right;
    }
    
    #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 don’t 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
    the link on the menu on top of the page suppose to show a green image when you rollover it.

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

    Thanks in advance,
    SugarBrush

Viewing 1 replies (of 1 total)
  • John
    Member

    @jberghem

    try specifying the complete template path to your image like this:

    background-image: url(<?php bloginfo('template_url'); ?>/Images/navhover-bg.png);

    Maybe the browser just can’t find the image. At first glance the CSS looks okay to me too.

Viewing 1 replies (of 1 total)
  • The topic ‘Trouble with image rollover on WordPress horizontal menu bar!’ is closed to new replies.