菜单下拉菜单在 Internet Explorer 上不起作用答案

【问题标题】：Menu drop down not working on Internet Explorer菜单下拉菜单在 Internet Explorer 上不起作用
【发布时间】：2013-04-17 14:51:23
【问题描述】：

我有一个下拉菜单，在 Mozilla 和 Chrome 上运行良好，但在 Internet Explorer 上却不行。当下拉菜单向下滚动并且我将鼠标放在其上方时，它会隐藏。

<ul>
    <li class="t-item t-state-default" style="float:right;"><a class="t-link" href="#"><img alt="image" class="t-image" src="/Newsletter/Content/Images/icon_logout.png" /> </a></li>
    <li class="t-item myAccount t-state-default"><a class="t-link" href="#Nav-7">Contul meu<span class="t-icon t-arrow-down"></span></a>
        <ul class="t-group">
            <li class="t-item">
                <div class="t-content" id="Nav-7">
                    <table>
                        <tr>
                            <td> Salut </td>
                            <td><em>Username</em></td>
                        </tr>
                        <tr>
                            <td> Cont </td>
                            <td><select id="ddlConturi" name="ddlConturi">
                                    <option selected="selected" value="0">Toate</option>
                                    <option value="1">Cont 1</option>
                                    <option value="2">Cont 2</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2"><a href="mylink">Do stuff</a></td>
                        </tr>
                    </table>
                </div>
            </li>
        </ul>
    </li>
</ul>

我尝试使用 jquery 解决此问题，但没有成功。

$(".myAccount table *, .myAccount table *:focus,.myAccount table *:active").hover(function () {

            $(".myAccount ul.t-group").css("display", "block");
        }, function () {
            $(".myAccount ul.t-group").css("display", "block");
        });

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

在你的标签之间添加这个元标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

它对我来说很好用。它将强制关闭兼容性视图。公平的警告，这是一种黑客行为。

【讨论】：

【解决方案2】：

如果您可以绑定到mouseenter 和mouseleave 事件而不是hover，那就更好了。因为当您将鼠标移动到另一个元素时，事件会冒泡并最终隐藏下拉菜单。

【讨论】：

【解决方案3】：

IE 不支持此 CSS 选择器 >（大于字符）。你不能在锚标签以外的任何东西上使用 :hover 伪元素，否则 IE 不会读取它。

查看链接：

http://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx

http://www.quirksmode.org/css/contents.html

【讨论】：