CODEWITHSUNDEEP
htmlcsshover
MathAng
MathAng

Reputation: 452

Hover on <li> haven't good size

I'm using bootstrap and I have this code :

<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>

I have this 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, 0, 0, .5);
}

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

But when hover an element of the list, background color is only for top of my element.. Look this screen: screen

Someone understand please? I don't understand why height of over is small like this... If I increase height, it doesn't work.

Upvotes: 1

Views: 51

Answers (1)

dutchsociety
dutchsociety

Reputation: 583

@MathAng,

It looks like the height of your A and LI aren't matching the same height, the default height of the LI tag is 26 pixels in height. But at your CSS you're saying that it must be 10 pixels for the A tag.

What I prefer is or use:

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

instead of:

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

Or add height: 10px; to your LI tag, like so:

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

Hopefully this does the trick for you!

Upvotes: 2

Related Questions