絶対要素の下にある要素は、その上の絶対要素と干渉しています

Question

thisのURLで触発されたCSSとjQueryを使用してHTML内にselect要素をHTMLで作成しました。私のペンへのリンクhere。

私は後でアニメーションと追加のスタイリングを行いますが、最初にバグを解決する必要があります。一番上のSelectボックスをクリックすると、ドロップダウンリストが表示されますが、2つの要素（ 'Programmer'と 'Hacker'）がホバー上で正しく動作していないという問題があります。私は、それらの下のセカンドセレクトボックスが原因であると推測しています。それらを適切に動作させる方法はありますか？

私は、2にドロップダウンのz-indexを設定しようとしましたが、運はありませんでした。

Answer 1

いつもz-index号です。

.sl-batman { 
    z-index: 2; 
} 

Answer 2

両方のZ-インデックスを設定すると、動作することがわかります。

.sl-batman{ 
    z-index: 2; 
} 

.sl-superman{ 
    z-index: 1; 
} 

Demo here