HTML Select Dropdown选项在背景上重叠问题

Question

我对HTML选择下拉选项有小的疑问。我单击了HTML下拉菜单，但没有从下拉菜单中选择任何选项，而是将光标移到了“显示背景”标签上。现在，下拉菜单中的选项与背景重叠。

也可以在http://mansri.com/issues/select-dropdown/index.html

找到一个示例

下面是我的HTML，CSS和jQuery代码。

HTML代码

<div style="margin-top: 120px; width: 80%; margin-left: auto; margin-right: auto;">
    <a href="#" class="show-backdrop">Show Backdrop</a>
    <div class="backdrop">
            &nbsp;
    </div>
    <select>
        <option>Select Any</option>
        <option value="">sadf</option>
        <option value="">qewrqer</option>
        <option value="">xxccvcv</option>
        <option value="">;lkj;lkjdssf</option>
    </select>
    <br>

</div>

CSS

.backdrop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #000;
  opacity: 0.8;
  display: none;
}

.backdrop-show {
  display: block;
}

jQuery

$('.show-backdrop').hover(function(){
    $('.backdrop').addClass('backdrop-show');
});

在悬停显示背景时，如果显示选择下拉菜单选项，则该背景不应与我的背景重叠。

提前感谢您为此提供解决方案。