Html下拉列表不会叠加在其他网页元素之上

Question

在发布这个问题之前，我已经研究了各种堆栈溢出问题并实施了它们，但它对我没有用。

请不要将此问题重复发布。

我的问题是我的下拉列表不会出现在其他元素之上。

我已将代码发布在jsfiddle

中

注意：请将输出窗口向左拖动以获得正确的标题视图

在SCSS窗口中，用户配置文件下拉列表由类navbarDropdown

处理

.navbarDropdown {
  float: right;
  padding: 0px 10px;
  position: relative;

  img {
    margin-top: -5px;
    height: 40px;
  }

  ul {
    background-color: $base-secondary-color;
    padding: 4px 0;
    position: absolute;
    z-index: 999;
    top: 30px;
    left: 0;
    width: auto;
    border: none;
    border-radius: 1px;
  }

  ul a {
    height: 30px;
    padding: 0 40px 0 10px;
    display: block;
  }
}

我尝试了位置：absoulute和z-index。

我不知道错误在哪里。任何帮助表示赞赏？

Answer 1

从外观上看，隐藏下拉列表的原因是因为它溢出了nav元素的内容，＆＃34; .navbar＆＃34;。添加CSS属性overflow：visible;应该解决眼前的问题。