WordPress.org

Ready to get started?Download WordPress

Forums

Trouble with image rollover on WordPress horizontal menu bar! (2 posts)

  1. SugarBrush
    Member
    Posted 5 years ago #

    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

  2. jberghem
    Member
    Posted 5 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic