I am attempting to create a navigation bar with a simple thin border that becomes thicker when hovered over. Although I have written the code below, it seems to not be working as intended. How can I fix this issue?
#top-menu ul li a
{
display: block;
float: left;
width: 80px;
max-height: 15px;
text-align: center;
margin: 0;
padding: 10px 0;
text-decoration: none;
font-size: 11pt;
color: rgb(0,0,0);
background-color: rgb(255,255,255);
border-bottom: rgb(0,0,0) solid 2px;
}
#top-menu ul li a:hover
{
border-bottom: rgb(0,0,0) solid 4px;
}