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

Posted 2023-03-21

【中文标题】单击下拉菜单显示一个白框

【英文标题】：clicking on drop down is showing a white box

【发布时间】：2021-09-09 02:56:48

【问题描述】：

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

      <nav>
    <ul>
        <li><img style="margin-right:20px;font-family:sans-serif" class="logo" src="~/Images/Logo.png"    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>

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

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

【参考方案1】：

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

nav 
    background-color: darkcyan;
    margin: 0;

【讨论】：

我一删除溢出：隐藏，所有菜单项都消失了，深青色变成了白色

我稍后会尝试找出它。看起来很奇怪。也许，没有足够的细节