下拉列表和栏

Question

我有一个CSS，显示顶部导航栏，带有一个下拉菜单。

.topnav {
  background-color: white;
  overflow: visible;
  position: relative;
  z-index: 9999px;
}

.topnav a {
  float: left;
  display: block;
  color: #139BF7;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

<nav class="topnav" id="myTopnav">
  <ul id="authdropdown" class="dropdown-content">
    <li> <a href="/profile"> Edit Profile</a></li>
    <li><a href="/viewprofile">View Profile</a></li>
    <li> <a href="/UserSettings">  Orders</a></li>
    <li><a href="/UserSettings">Payments</a></li>
    <li><a href="/UserSettings">Favourites</a></li>
    <li><a href="/UserSettings"> Settings</a></li>
    <li><a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Sign Out</a></li>
  </ul>
</nav>

如果将overflow: hidden下拉列表显示在div之外且仅显示第一个元素，则显示条形背景。

然而，当我把overflow: visible下拉显示所有元素但背景变得不可见时。

那么显示用下拉元素显示背景的解决方案