Question

我在没有使用任何javascript的情况下构建了一个小的下拉菜单，但它在firefox和IE 10中并不完全合作。这就是它的样子：

enter image description here

Link1和Link2都是链接。在chrome中，单击它们工作正常 - 我按预期重定向。但是，在Firefox和IE10中，菜单只是关闭而不访问链接。

我认为这可能是z-index问题，但我尝试添加它，但它似乎没有做任何事情。将鼠标悬停在firefox中的这些链接上会显示工具提示，同时显示链接地址。

知道可能导致这种情况的原因是什么？或者有更好的方法吗？我想尝试尽可能避免使用javascript。

标记：

<ul class="header-right">
<li>
    <ul class="user-menu">
        <li class="menu-item" tabindex=0 id="submenu_li">
            <span class="sub-menu-header" title="Menu">Long menu name Menu</span>
            <div class="dropdown"></div>
            <div class="user-sub-menu" id="user-sub-menu">
                <ul class="submenu-list">
                    <li class="submenu-item">
                        <a id="a1" href="/Test">Link1</a>
                    </li>
                    <li class="submenu-item">
                        <a href="/Test2">Link2</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</li>
</ul>

Css有点长：

ul.header-right
{
    position: absolute;
    top: 7px;
    right: 10px;
    list-style-type: none;
    margin: 0;
}

ul.header-right li
{
    display: inline-block;
    padding-left: 2px;
    vertical-align: top;
}

li.menu-item
{
    padding: 2px 2px 2px 10px !important;
}

li.menu-item:hover
{
    background-color: #888888;
    cursor: pointer;
}

li.menu-item:focus #user-sub-menu
{
    display: block;
}

ul.user-sub-menu a, ul.user-sub-menu a:visited
{
    text-decoration: none;
    color: #232323;
}

div.user-sub-menu
{
    display: none;
    background-color: #FFFFFF;
    min-width: 125px;
    max-width: 300px;
    min-height: 50px;
    max-height: 400px;
    position: absolute;
    right: 22px;
    z-index: 1000;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #232323;
    font-size: 1em;
}

div.user-sub-menu ul
{
    display: block;
    margin: 0;
    padding: 0;
}

div.user-sub-menu li
{
    display: block;
    padding: 2px 2px 2px 2px;
    font-size: 1.15em;
    border: 1px solid #FFFFFF;
}

div.user-sub-menu li a, div.user-sub-menu li a:visited
{
    text-decoration: none;
    color: #232323;
}

div.user-sub-menu li:hover
{
    text-decoration: none;
    background-color: #CCFFCC;
    border: 1px solid #DDDDDD;
}

JSFiddle

Answer 1

我最终弄清楚发生了什么（或者至少，我认为我做过）。

当我关注li.menu-item #user-sub-menu div出现时，一切都很好。但是，如果我单击该div中的一个元素，例如其中一个链接，从技术上讲，li.menu-item元素已经失去焦点并使div不可见。

我最好的猜测是，Chrome在处理焦点更改之前处理了链接点击，因此事情立即起作用。对于firefox，我添加了以下css，以便在#user-sub-menu失去焦点时保持li.menu-item div打开。

#user-sub-menu:active, #user-sub-menu:hover, #user-sub-menu:focus
{ 
    display: block;
}

因此，这在Firefox中运行良好。不幸的是它仍然无法在IE中运行，所以如果其他人有任何见解，我很高兴听到它们，但我现在将其标记为已回答。

Css菜单无法点击链接

1 个答案: