php - 在 CSS 菜单中选择表单失去 CSS 下拉菜单的焦点

Question

我有一个 CSS 下拉菜单，在该 CSS 菜单内有一个 HTML 选择表单。我注意到，仅在 Firefox 中，当我将鼠标悬停在 CSS 菜单上并单击选择下拉按钮时，整个 CSS 菜单失去悬停焦点，导致整个 CSS 菜单消失。有什么想法吗？

jsfiddle.net/chrisvenus/jKV8Z/1

<div class="popup-button">
 <div class="popup-container">
  <span class="popup-title">Title:</span>
   <select>
   <option value="Option 1">Option 1</option>
   <option value="Option 2">Option 2</option>
   <option value="Option 3">Option 3</option>
   <option value="Option 4">Option 4</option>
  </select>
 </div>
</div>


.popup-button {
    background: #000;
    float: left;
    padding: 6px 0 7px;
    position: relative;
    width: 148px;
}
.popup-container {
    background: none repeat scroll 0 0 #333333;
    color: #FFFFFF;
    display: none;
    left: 148px;
    padding: 20px;
    position: absolute;
    top: 0;
}


$('.popup-button').live('hover', function(){
 $(this).children('.popup-container').toggle();
});

Answer 1

经过一些故障排除后，我决定去掉 jQuery 悬停事件，因为没有任何动画，只用 :hover 控制 CSS 菜单。这解决了 Firefox 问题。

.popup-button:hover .popup-container {
 display: block;
}