jQuery的菜单里面没有工作选择框

Question

请检查该链接小提琴为什么在下拉选择框中不能正常工作

jsfiddle

我与这个https://jqueryui.com/menu/ 工作，但我的选择框中不能正常工作。

$(function() { 
 
    $("#left_menu").menu(); 
 
});

ul ,li{ 
 
    width:100px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<ul id="left_menu"> 
 
<li><a href="#">Passport(s)</a><ul><li> 
 
\t \t \t \t <label for="passport_select">Select Experience</label> 
 
\t \t \t \t <select name="passport_select" id="passport_select"> 
 
\t \t \t \t \t <option>Conotou</option> 
 
\t \t \t \t  <option>BOSSMAN A</option> 
 
\t \t \t \t  <option>BOSSMAN B</option> 
 
\t \t \t \t  <option>Import</option> 
 
\t \t \t \t </select> 
 
\t \t \t \t <button class="filter_link" id="passport">SUBMIT</button> 
 
\t \t \t \t <br> 
 
\t \t \t </li></ul></li> 
 
    <li><a href="#">gender</a> 
 
    <ul> 
 
     <li class="filter_link" id="gender"> 
 
     <input type="radio" name="sex" value="male" checked> Male 
 
     <br> 
 
     <input type="radio" name="sex" value="female"> Female 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

让另一个子菜单（而不是选择），并用CSS控制溢出。这样你就可以在一个小空间内容纳数百个国家的价值观。

<li> 
    <div class="CountryWrapper"> 
     <ul> 
      <li>BOSSMANA</li> 
      <li>BOSSMANB</li> 
     </ul> 
    </div> 
</li> 


     .CountryWrapper{   
      overflow-x: scroll; 
      height: 200px; 
     }