I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hovered over, the 3px line appears on top of the 1px line spanning across the page? Thank you.
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
font-family: "Helvetica Neue", verdana, arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item"><a href="#home">home</a></li>
<li class="ty-menu__item"><a href="#news">news</a></li>
<li class="ty-menu__item"><a href="#contact">contact</a></li>
<li class="ty-menu__item"><a href="#about">about</a></li>
</ul>
</div>
</body>
</html>