javascript - 将鼠标悬停在下拉选项上合并到容器后面，如何让下拉选项显示在容器上方

Question

将鼠标悬停在下拉菜单(类别、排序方式)上，无法在容器后面查看选项，如何让下拉选项显示在容器上方

.container {
    margin: 25px auto;
    position: relative;
    width: 800px;
    height:800px;
    background-color: #D8D8D8;
    padding-left: 10px;
    padding-right: 10px; 
}
h1 {
    text-align:center;
}

}
.categories {
    float: left;    
}
.sortby{
    float: center;  
}
.search{
    float:right;
}    
.container1 {
    position: relative;
    top: 150px;
    left: 200px;
    bottom: 300px;
    right: 400px;
    vertical-align: middle;
    position: absolute;
    width: 50%;
    background-color: #FFFFFF;
    border: solid 1px #0076a3;     
}

请在下面我的 fiddle 链接中找到 HTML 和 CSS 代码: https://jsfiddle.net/testnew/fne7njrb/

Answer 1

设置下拉 UL 的 z-index:

li ul {
  display: none;
  z-index: 100; <--- Set this
}