当我悬停时下拉菜单不显示

Question

#menu {

    overflow: hidden;

    background: #202020;

}

#menu ul {

    margin: 0px 0px 0px 0px;

    padding: 0px 0px;

    list-style: none;

    line-height: normal;

    text-align: center;

}

#menu li {

    display: inline-block;

}

#menu a {

    display: block;

    position: relative;

    padding: 0px 100px 0px 40px;

    line-height: 70px;

    letter-spacing: 2px;

    text-decoration: none;

    text-transform: uppercase;

    text-align: center;

    font-family: 'Varela Round', sans-serif;

    font-size: 13px;

    color: rgba(255,255,255,0.5);

    border: none;

}

/* Dropdown Content (Hidden by Default) */

#menu .dropdown-container{

    position: relative;

}

#menu .dropdown {

    position: relative;

    display: inline-block;

  }

#menu .dropdown-content {

    position: absolute;

    display: none;

    background-color: #202020;

    min-width: 160px;

    z-index: 9999;

    box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.5);

  }

  

  /* Links inside the dropdown */

#menu .dropdown-cotainter a {

    color: rgba(255,255,255,0.5);

    padding: 3px;

    position: relative;

    text-decoration: none;

    display: Block;

    z-index: 9999;

  }

  

  /* Change color of dropdown links on hover */

#menu .dropdown-content a:hover {color: #ddd;}

  

  /* Show the dropdown menu on hover */

#menu .dropdown:hover .dropdown-content {

    display: block;

    z-index: 9999;

}

当我将鼠标悬停在链接上时，我可以看到菜单的一部分显示，但不是全部，我认为这是因为容器覆盖了它，但我不知道如何使菜单独立或位于要显示的容器上方。我尝试将位置更改为绝对位置，但仍然不起作用。有人可以帮我吗:D

Answer 1

如果你删除overflow: hidden你的代码有效。#menu {    overflow: hidden; //remove this line    background: #202020;}