CSS DropDown菜单与下划线内容重叠

Question

我的DropDown菜单有问题 我想要一个注销的下拉菜单，我有它的css代码，但它完全显示。

在导航栏下面，其中有一个应该有下拉菜单的按钮，是第二个div .Content。此div使用来自其他.php文件的php动态加载当前站点内容。我的问题是，当我将鼠标悬停在下拉按钮上时，它会在到达重叠导航栏div的y轴末端时切断下拉内容

我的HTML代码就是这个

＆＃13;

＆＃13;

.NavBarDropDown {
  position: relative;
  display: inline-block;
}

.NavBarDropDown-Content {
  display: none;
  position: absolute;
  background-color: #34495e;
  min-width: 160px;
  min-height: 160px;
  z-index: 99;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.NavBarDropDown:hover .NavBarDropDown-Content {
  display: block;
}

＆＃13;

<ul class="NavBarMenu">
  <li class="NavBarButtonIcon NavBarDropDown">
    <a href="index.php?site=account"><img class="NavBarIcon" src="http://via.placeholder.com/34x33" style="height: 34px; width: 33;"> </a>
    <ul>
      <li class="NavBarDropDown-Content">
        <a href="logout.php">Logout</a>
      </li>
    </ul>
  </li>
  <li class="NavBarButtonIcon">
    <a href="index.php?site=notifications"><img class="NavBarIcon" src="http://via.placeholder.com/34x33"></a>
  </li>
  <li class="NavBarButton">
    <a href="index.php?site=classoverview">	Klassen&uuml;bersicht	</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;