html - 边框的右下角不见了？

Question

我在列表中的某些元素的左侧和右侧有边框，但我得到了这些我不想要的白色间隙，但它只在右侧，这很奇怪而且我还没有能够弄清楚我做错了什么。

任何帮助都会很棒。 代码:

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>

Answer 1

ul li 中的样式

border: 1px solid white; 

导致绘制额外的白线

去掉它，你应该就好了