Underline hover is underlining extra - html

Question

Here's the code I have problem with my underline hover effect its exppanding extra how to fix it please help me out ************************
HTML
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>Home</li>
<li><a class="dropbtn">Models</a>
<ul class="dropdown-content">
<li></li>
<li>Audi</li>
<li>Bmw</li>
<li>Mercedes</li>
</ul>
</li>
<li>Offers</li>
<li>Group Sales</li>
<li>Reviews</li>
</ul>
</div>
And also i want my dropdown in the middle of his parent And here its*********
CSS
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
top:-20px;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
transition: width all 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color:white;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}

Answer 1

If I understand your problem correctly, the issue is with the dropdown items not being centered and the dropdown underline being too long. I believe this issue is caused by the padding on the dropdown div.
To resolve this, add some normalised padding to your .dropdown-content class:
.dropdown-content {
padding: 0 20px;
}

Answer 2

let the underline be attached to the text it self not to all the list item so it takes the width of just the text, now it takes the width of the whole cell in the list