Some items in my list have borders on the left and right sides, but I am experiencing unexpected white gaps only on the right side. I have been unable to identify the issue despite going through my code multiple times.
Any assistance would be highly appreciated. The code:
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
width: 150px;
border: 1px solid white;
background: white;
}
ul li:hover {
border: 1px solid black;
}
ul li:hover ul.dropdown {
display: block;
}
ul li:hover li {
border-left: 1px solid black;
border-right: 1px solid black;
}
ul li:hover li.top {
border-top: 1px solid black;
}
ul li:hover li.bottom {
border-bottom: 1px solid black;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
font-size: 14px;
width: 150px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: -1px;
}<ul style="font-size: 16px; width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 4px;">
<li><a href="#"><u>Products</u></a>
<ul class="dropdown">
<li class="top"><a href="#">Apples</a>
</li>
<li><a href="#">Cans</a>
</li>
<li><a href="#">Bowls</a>
</li>
<li class="bottom"><a href="#">Cups</a>
</li>
</ul>
</li>
</ul>