Fix highlight in navigation menu

  • Resolved animeshtripathi

    (@animeshtripathi)


    12 years, 5 months ago

    Hi,

    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.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    12 years, 5 months ago

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

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

    Thread Starter animeshtripathi

    (@animeshtripathi)

    12 years, 5 months 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?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Fix highlight in navigation menu’ is closed to new replies.