下划线悬停是强调额外的

Question

这里的代码我有问题我的下划线悬停效果它的扩展额外如何解决它请帮助我********************* *** 的 HTML

<div class="nav-wrap">
<ul class="group" id="example-one">
<li><a href="#">Home</a></li>
<li><a class="dropbtn">Models</a>
<ul class="dropdown-content">
<li><a href="#"></a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Bmw</a></li>
<li><a href="#">Mercedes</a></li>
</ul>
</li>
<li><a href="#">Offers</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>

而且我也希望我的父母在他的中间下降而且这里是********* 的 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

如果我正确理解您的问题，问题是下拉项目没有居中且下拉列表下划线太长。我相信这个问题是由下拉div上的填充引起的。

要解决此问题，请在.dropdown-content课程中添加一些规范化的填充：

.dropdown-content {
    padding: 0 20px;
}

Answer 2

让下划线附加到文本本身而不是所有列表项，因此它只占用文本的宽度，现在它占据列表中整个单元格的宽度