选择删除父级中的悬停状态

Question

我有一个带有一些信息和选择输入的容器。将鼠标悬停在其父容器上时，此容器会打开。我的问题是在IE和Chrome测试版中（不太担心Chrome测试版），每当我尝试打开选择时，容器就会失去焦点并关闭。

检查这个小提琴： Demo

<ul class="hover">
    <a href="#">Some title</a>
    <ul class="dropdown-container">
        <li>
            <select>Select label
                <option>item 1</option>
                <option>item 2</option>
                <option>item 3</option>
            </select>
        </li>
    </ul>
</ul>

所以我想知道是否有人有一个聪明的伎俩或解决方法。

/ *编辑* /

所以我设法在某种程度上解决了这个问题。它并不完美，但它确实有效。您可以想到的任何改进都是受欢迎的，但现在这是我的解决方案。

var listDropdown = $('.cp-listDropdown');
    var dropdownContent = $('.cp-dropdown-content');

    listDropdown.on("mouseover", function () {
        dropdownContent.css('visibility', 'visible');
    }).on("mouseout", function () {
        setTimeout(function () {
           var isHovered = listDropdown.is(':hover');
           if (!isHovered) {
               dropdownContent.css('visibility', 'hidden');
           }
        }, 1500);
    });