[Resolved] Padding on submenu gives weird effect on hover

Home Forums Support Padding on submenu gives weird effect on hover

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1191596
    Lucy

    Hi there

    I have added a little bit of left padding to my dropdown menu items because otherwise they sat right up against the edge of the dropdown:

    .sub-menu li {
    padding-left: 10px;
    }

    But this has lead to a weird effect where the background of the menu item expands to the right on hover outside the dropdown box.

    I just can’t see why it’s doing this! Inspecting the sub-menu element I can’t see any hover effects other than the change of colour.

    To see the problem, go to the Services dropdown menu and hover over any of the services and you’ll see the white extra bit to the right.

    I’d be very grateful for any clues!

    Many thanks
    Lucy

    #1191715
    David
    Staff
    Customer Support

    Hi there,

    yeah the padding will increase the width of the element by 10px. You can stop this from happening with the box-sizing: border-box; property ie.

    .sub-menu li {
        padding-left: 10px;
        box-sizing: border-box;
    }
    #1192581
    Lucy

    Fantastic support as always – thank you!

    #1192664
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.