CSS Chrome проблема

Question

У меня есть кусок HTML, как этот http://jsfiddle.net/Ca28Y/

HTML

<ul class="searchitems"> 
    <li class="filis">Build 
    <div class="fidivs"><div class="form-item form-type-select form-item-build"> 
<select id="edit-build" name="build" class="form-select"><option value="All" selected="selected">- Any -</option><option value="Slim">Slim</option><option value="Medium">Medium</option><option value="Heavy">Heavy</option></select> 
</div> 
</div> 
    </li> 
    <li class="filis">Complexion 
    <div class="fidivs"><div class="form-item form-type-select form-item-complexion"> 
<select id="edit-complexion" name="complexion" class="form-select"><option value="All" selected="selected">- Any -</option><option value="Light (PaleWhite or Freckled)">Light (PaleWhite or Freckled)</option><option value="Fair (White to Mediterannean)">Fair (White to Mediterannean)</option><option value="Olive (Tanned to Light Brown)">Olive (Tanned to Light Brown)</option><option value="Brown">Brown</option><option value="Dark (Dark Brown to Black)">Dark (Dark Brown to Black)</option></select> 
</div> 
</div> 
    </li> 
</ul> 

CSS

.searchitems li { 
    background: url("../images/search_play_g.png") no-repeat scroll 170px 7px rgba(0, 0, 0, 0); 
    color: #373E44; 
    font-size: 12px; 
    font-weight: bold; 
    height: 15px; 
    list-style: none outside none; 
    padding: 10px 15px; 
    position: relative; 
    text-transform: uppercase; 
} 
.searchitems li a { 
    display: block; 
} 
#userleftmenu li { 
    background: url("../images/search_play_g.png") no-repeat scroll 203px 5px rgba(0, 0, 0, 0) !important; 
} 
.searchitems li:hover { 
    background: none no-repeat scroll 159px 7px rgba(0, 0, 0, 0); 
} 
.searchitems li.filis .fidivs { 
    background: none repeat scroll 0 0 #78BB32; 
    border-radius: 3px; 
    display: none; 
    left: 200px; 
    min-height: 60px; 
    min-width: 210px; 
    padding: 5px; 
    position: absolute; 
    top: 0; 
} 
.searchitems li:hover { 
    background-color: #78BB32; 
    color: #FFFFFF; 
} 
.searchitems label { 
    color: #FFFFFF; 
    font-size: 13px; 
} 
.searchitems li:hover .fidivs { 
    display: table !important; 
    left: 200px; 
    top: -1px; 
    z-index: 9; 
} 

Когда я парить меню слева ДИВ выскочить, и мы можем увидеть выберите поля. В хром я не могу нажать на поле выбора. Он отлично работает в Firefox, проблема только в хром. В чем может быть причина?

Answer 1

Попробуйте установить min-height: auto и margin-top: 2px на номер .searchitems li.filis .fidivs {} и работает нормально в Chrome, Safari и Firefox.

.searchitems li.filis .fidivs { 
    background: none repeat scroll 0 0 #78BB32; 
    border-radius: 3px; 
    display: none; 
    left: 200px; 
    min-height: auto; // set this 
    margin-top: 2px; // add this 
    min-width: 210px; 
    padding: 5px; 
    position: absolute; 
    top: 0; 
} 

Проверьте это: http://jsfiddle.net/Ca28Y/2/

Answer 2

включить этот CSS

 <style> 
     .searchitems li { 
      background: url("../images/search_play_g.png") no-repeat scroll 170px 7px rgba(0, 0, 0, 0); 
      color: #373E44; 
      font-size: 12px; 
      font-weight: bold; 
      height: 15px; 
      list-style: none outside none; 
      padding: 10px 15px; 
      position: relative; 
      text-transform: uppercase; 
      } 

    .searchitems li a { 
      display: block; 
      } 

    #userleftmenu li { 
      background: url("../images/search_play_g.png") no-repeat scroll 203px 5px rgba(0, 0, 0, 0) !important; 
     } 

    .searchitems li:hover { 
      background: none no-repeat scroll 159px 7px rgba(0, 0, 0, 0); 
      } 

    .searchitems li.filis .fidivs { 
      background: none repeat scroll 0 0 #78BB32; 
      border-radius: 3px; 
      display: none; 
      left: 200px; 
      min-height: 8px; 
      min-width: 210px; 
      padding: 2px 5px; 
      position: absolute; 
      top: 0; 
      } 

    .searchitems li:hover { 
      background-color: #78BB32; 
      color: #FFFFFF; 
      } 

    .searchitems label { 
      color: #FFFFFF; 
      font-size: 13px; 
      } 

    .searchitems li:hover .fidivs { 
      display: table !important; 
      left: 200px; 
      top: 4px; 
      z-index: 9; 
      } 

    </style>