CSS Navagation Hover Problem

Discussion in 'CSS' started by heyman12, Nov 9, 2008.

  1. #1
    I just created a CSS based Navigation bar, and I have this problem:
    [​IMG]

    The Home is selected, and About has the cursor on it, causing the hover. As you can see, the hover image is off...
    I am not the best at CSS so the solution might be quite obvious, I just cant seem to see anything wrong.

    This is the original image for the tabs, Idle is on the top, selected is in the middle, and hover is on the bottom, each section is 27 px high
    [​IMG]
    (I am going to fix the image so the white part of the hover does not run into the text)

    
    <ul id="nav">
    <li class="sel"><a href="/">Home</a></li>
    <li><a href="about/">About</a></li>
    <li><a href="tutorials/">Tutorials</a></li>
    <li><a href="community/">Community</a></li>
    <li><a href="funstuff/">Fun Stuff</a></li>
    </ul>
    
    Code (markup):
    
    /*Nav bar */
    
    ul#nav {
    height: 27px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
    ul#nav li {
    background: #bdf url(img/tab.png);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 20px;
    }
    
    ul#nav a {
    background: url(img/tab.png) 100% 0;
    color: #FFF;
    display: block;
    float: left;
    line-height: 27px;
    padding-right: 20px;
    text-decoration: none;
    font-weight: bold;
    }
    
    ul#nav li.sel {
    background-position: 0 -27px;
    }
    
    ul#nav li.sel a {
    background-position: 100% -27px;
    color: #008;
    font-weight: bold;
    }
    
    ul#nav a:hover {
    background-position: 0 -54px;
    }
    
    Code (CSS):
    Please help!

    Thanks
     
    heyman12, Nov 9, 2008 IP
  2. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #2
    For the menus background, it is not difficult, but it takes time to fix it .
    You only have to modify the px value of background in css files . Good luck to you, guy .
     
    justinlorder, Nov 10, 2008 IP