2

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

在此处输入图像描述

两者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

4

1 回答 1

1

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

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

我最好的猜测是chrome在处理焦点更改之前处理了链接点击，因此事情马上就起作用了。对于 Firefox，我添加了以下 css 以使#user-sub-menudiv 即使在li.menu-item失去焦点时也保持打开状态。

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

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

于 2013-08-20T18:26:55.397 回答