Why do list items move when hovering

  • Resolved jcimb

    (@jcimb)


    11 years, 6 months ago

    In Firefox (haven’t checked it on others yet), when mouse hovers over the unordered list items in the navigation menu, the menu item itself and the ones to the left of it shift to the left.
    It’s got to be some difference in padding or margins between the link and hover state, but I just can’t find it.
    Here is the site: http://www.organizingmaniacs.com/
    I’m referring to the HOME ABOUT US SERVICES etc.

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

    (@stephencottontail)

    11 years, 6 months ago

    In your stylesheet, on lines 565 and 579, you’ve got padding: 0 22px for your menu links, and padding: 0 24px when you hover over the menu links.

    Lines 565-571:

    ul.virginiaorganizer-hmenu>li>a.active
{
   padding:0 22px;
   margin:0 auto;
   color: #0E5971;
   text-decoration: none;
}

    Lines 579-583:

    ul.virginiaorganizer-hmenu>li>a:hover, ul.virginiaorganizer-hmenu>li:hover>a
{
   padding:0 24px;
   margin:0 auto;
}

    Thread Starter jcimb

    (@jcimb)

    11 years, 6 months ago

    Thanks Stephen, that fixed it!

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

The topic ‘Why do list items move when hovering’ is closed to new replies.