Question

I have a css dropdown menu with an HTML select form inside of that CSS menu. I have noticed, in firefox only, that when I am hovering on the CSS menu and I click on the select dropdown button, the whole CSS menu loses hover focus, causing the whole CSS menu to disappear. Any thoughts?

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

After some troubleshooting, I decided to just get rid of the jQuery hover event since there wasn’t any animation and control the CSS menu with just a :hover. That took care of the firefox issue.

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