Html IE中的下拉列表干扰了CSS悬停样式

我有一个使用纯CSS菜单系统的网页。当用户将鼠标移到菜单上时，菜单将展开，当鼠标离开时，菜单将折叠。问题是，我在这个菜单中有一个HTML下拉列表，即“select”元素，在Internet Explorer中，将鼠标移动到“select”中的任何项目上会导致菜单崩溃

我的测试表明，在包括11在内的IE版本中，将鼠标移到“选择”列表中的“选项”项上会导致“选择”的父元素不再被视为：hover

这个JS小提琴说明了这个问题：

当我在Opera 27.0中运行这个提琴时，当鼠标在框上时，框变为绿色，即使在单击“select”元素并将鼠标移动到列表中的某个项目上后，框仍保持绿色。所以我的CSS菜单在Opera中应该可以正常工作

但是，在IE 11中，当您单击并将鼠标移到列表中的“选项”元素上时，该框再次变为红色

我如何才能让IE中的“选择”元素像Opera中的元素那样表现自己，并将：hover状态“传递”到底层元素？注意：我已经尝试过指针事件：无；但它不起作用

  [1]: https://jsfiddle.net/q3L2m3ys/

.TestCss{
    width:300px; height:300px;
    background-color:red;
}

.TestCss:hover {
    background-color:green;
}

<div class="TestCss">
    <select name="MyDropDown">
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>

[1]：https://jsfiddle.net/q3L2m3ys/
.TestCss{
宽度：300px；高度：300px；
背景色：红色；
}
.TestCss：悬停{
背景颜色：绿色；
}
测试1
测试2
测试3

节省了我的时间（即使已经在css文件中设置了背景，也要重置背景）：$（'select'）.css（'background-color'，'red'）

您是否仅限于css答案，还是尝试JavaScript/jQuery？我使用的是预构建的解决方案（ACE响应管理模板），他们的鼠标悬停菜单是纯css。但是，如果我真的需要，我可以修改它们来使用jQuery。。。这是一个非常有趣的问题。我注意到在Chrome上没有下拉动画，但在IE11上有一个。。。这让我想知道这个简单的动画是否真的停止了悬停事件在父div上的传播。。。我相信有人可以更好地解释这一点，但如果你不明白，那么你可以一直使用JavaScript。