Element below an absolute elements is interfering with the absolute element on top of it
<p>I made a <code>select</code> element in HTML using CSS and jQuery inspired by <a href="http://tympanus.net/Development/SelectInspiration/index2.html" rel="nofollow">this</a> URL. Link to my pen <a href="http://codepen.io/radiantshaw/pen/YWrJqB" rel="nofollow">here</a>.</p>

<p>I'll do the animation stuff and additional styling later but first I have to solve a bug. When you click on the top Select box, then a dropdown list appears, but the problem is that two of it's elements ('Programmer' and 'Hacker') are not behaving properly on hover. I'm guessing that is because of the 2nd Select box beneath them. Any way to make them work properly?</p>

<p>I've tried setting the <code>z-index</code> of the dropdown to <code>2</code> but no luck.</p>