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 :(
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.
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