I'm currently utilizing bootstrap and have come across this code snippet:
<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>
Additionally, I have applied the following css styling:
.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, 0, 0, .5);
}
.scrollable-menu-brands li a {
height: 10px;
padding-top: 0px;
}
.dropdown-menu > li > a:hover{
background-color: red;
;}
Upon hovering over an item in the list, I noticed that the background color only covers the top portion of the element. You can refer to this screenshot for clarification: https://i.sstatic.net/GyuH5.png
If anyone has insight into why the hover area is limited in height despite attempts to increase it not working, your input would be greatly appreciated.