单击下拉菜单显示一个白框

Question

我的导航栏有以下代码。当我点击顶部导航栏上的用户下拉菜单时，我在子菜单中看不到任何项目：

      <nav>
    <ul>
        <li><img style="margin-right:20px;font-family:sans-serif" class="logo" src="~/Images/Logo.png"  width="60" height="60" runat="server" /><span style="font-size:20px">company Name</span> </li>
        <li style="margin-right:30%">&nbsp;</li>
       <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Users
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Details</a>
          <a class="dropdown-item" href="#">Department</a>
          <a class="dropdown-item" href="#">Sections</a>
        </div>
      </li>
        <li><a href="#">Admin</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="http://google.com/">One</a></li>
    </ul>
</nav> 

下面是我正在使用的样式表：

 <style>
body {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

nav {
    background-color:darkcyan;
    margin: 0;
    overflow: hidden;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style-type: none;
}

nav ul li a {
    color: white;
  
    display: block;
    line-height: 3em;
    padding: 1em 3em;
    text-decoration: none;
}

nav ul li a.logo {
    
   
    
}



li {
    float:left;
   
}

li:first-child {
    float: left;
}

        </style>

当我点击用户的下拉菜单时，我看到一个白框。下图是：

任何帮助将不胜感激。谢谢。

Answer 1

这是因为nav 的属性overflow 的值为hidden，所以下拉列表正在剪切。从样式中删除此规则并保留代码：

nav {
    background-color: darkcyan;
    margin: 0;
}