css - リストビューの背後に表示される Selectmenu ウィジェット

Question

selectmenu ウィジェットを押すと、select の下にあるリストビューの後ろにドロップダウンが表示されます。

HTML:

<div data-role="page" id="index">
    <div data-role="header" class="header" data-position="fixed" role="banner"> 
        <h1>Testapp</h1>
    </div><!-- /header --> 
    <div id="main-container" data-role="content"> 
        <select name="number-selector" id="number-selector">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
     <ul data-role="listview" data-inset="false" id="list1"> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
        <li>
          <p> Bla </p>
        </li> 
    </ul>
  </div>
</div>

CSS:

#list1{
    position:relative;
    width:280px;
    padding:0;
    background:#FFFFFF;
    padding-top: 14px;
    padding-bottom: 80px;
}
#main-container {
    background:#FFFFFF;
    overflow:auto;
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    height:100%;

}

selectmenu の CSS はまだありません。

selectmenuの下にあるリストビューの前にドロップダウンを表示したい。ただ、この時点では後ろに見えているようで見えません。他の ID の CSS プロパティに何かあると思いますが、何が何かわかりません。