The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Having problems with borders on hovering in my menu :(

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #39905


    I have created a vertical menu and would like it to have a right red border on hover and selected item.

    However, I can’t seem to get it correct on hovering as my li border seems to to mess up the hover state. The bottom border slightly overlaps the right border.

    Here is the code in a fiddle.

    Hope someone can help! Thanks :)


    Borders can’t overlap…they meet at 45deg.


    You might try making the link the same dimensions as the list item and applying different borders to one or the other.

    Kitty Giraudel

    It’s the proper rendering of borders. You have a 1px top border meeting a 5px right border. Those few little pixels are your top border.

    To avoid this, few options:
    – Use pseudo-elements (not very great in this case, it’s basic CSS),
    – Use the <li> tag to do the top border, and the <a> tag to do the right border.

    Edit: nice one Paulie, faster than me. :P

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.