懸停在下拉菜單選項合並在容器后面，如何獲得下拉菜單顯示在容器上方

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;     
}

請在下面的小提琴鏈接中找到HTML和CSS的代碼： https ://jsfiddle.net/testnew/fne7njrb/

Answer 1

為下拉UL設置z-index：

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

Answer 2

您需要在下拉菜單上設置z-index css屬性。 然后它們將在其他元素上可見。 像這樣：

  li ul {display: none;z-index:5;}

希望對您有所幫助！