将鼠标悬停在<li>上的大小不合适

如何解决将鼠标悬停在<li>上的大小不合适

我正在使用引导程序，并且我有以下代码：

<ul class="dropdown-menu scrollable-menu-brands" style="width:210px;">
    {foreach $arr as $id => $r}
       <li><a class="dropdown-item" style="font-size:15px;font-family: PT Sans Narrow,PTSansNarrow;" href="#">{$r}</a></li>
    {/foreach}
</ul>

我有这个CSS：

.scrollable-menu-brands {
    height: auto;
    max-height: 320px;
    overflow-x: hidden;
}

.scrollable-menu-brands::-webkit-scrollbar {
    -webkit-appearance: none;
}

.scrollable-menu-brands::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background,can't be transparent */
    background-color: rgba(0,.5);
}

.scrollable-menu-brands li a {
    height: 10px;
    padding-top: 0px;
}
.dropdown-menu > li > a:hover{
    background-color: red;
;}

但是当将鼠标悬停在列表中的某个元素上时，背景颜色仅用于该元素的顶部。 看这个屏幕：

有人可以理解吗？ 我不明白为什么上面的高度这么小... 如果我增加身高，那是行不通的。

解决方法

@MathAng，

A 和 LI 的高度似乎不匹配， LI 标签的默认高度为高度26像素。但是在您的CSS上，您说的是 A 标签必须为10像素。

我更喜欢或使用：

.scrollable-menu-brands li a {
    padding-top: 0px;
}

代替：

.scrollable-menu-brands li a {
    height: 10px;
    padding-top: 0px;
}

或添加高度：10像素；到您的 LI 标签，如下所示：

.scrollable-menu-brands li {
    height: 10px;
}

希望这能帮到您！