[resolved] Fix highlight in navigation menu (3 posts)

  1. animeshtripathi
    Posted 3 years ago #


    I'm using CSS to highlight a menu button on hover. Pretty simple. But it isn't highlighting the entire button. Some part on the left is left out. Here's the website.

    The CSS I'm using:

    #navigation > ul > li > a:hover {
    background: url('images/nav-active.png') repeat-x top left;
    padding-left: 10px;
    height: 41px;
    line-height: 41px;
    text-decoration: none;

    Can you tell me what is the problem here? I'm sure it's an easy fix, but I can't get it.


  2. Michael
    Part-Time Forum Moderator
    Posted 3 years ago #

    there is a 10px left padding on this style; change it to:

    #navigation li + li {padding-left: 4px;}

  3. animeshtripathi
    Posted 3 years ago #

    Thanks! Never looked into the li+li part, I had a li+li style set for the separators, editing the padding-left on that and removing the 10px padding in the a:hover worked fine :)

    Thankyou for helping me for the 3rd time, alchymyth! Owe you one. (three).

    btw, I posted two more issues on this forum, could you check those as well, please?

Topic Closed

This topic has been closed to new replies.

About this Topic