5

我有这个菜单，我自定义了它来像选择一样使用它。它在即 chrome 上工作得很好，但在 Firefox 上不起作用。正常行为是：当菜单在焦点上展开时，会显示链接（帮助和注销），如果您单击它们，则会在同一浏览器的其他页面中重定向。Firefox 上的错误行为：菜单 si 在焦点上展开，但链接（hep 和注销）没有重定向。

    <ul id="main">
                <li class="username" tabindex="1" >  <a>USER</a>
                    <ul class="curent_buser">
                        <li class="ai"><a class="jaximus"href="http://en.wikipedia.org/wiki/Wiki">Help</a></li>
<li class="aj"><a class="jaximus" href="http://en.wikipedia.org/wiki/Wiki" name="logoff">Log Off</a></li>                </ul>
                </li>
            </ul>

为什么要做这个firefox？？？我有最新版本的 ff :|

这是一个小提琴示例：http: //jsfiddle.net/RwtHn/1152/

4

2 回答 2

5

这是因为当您按下“帮助”或“注销”时，包含的元素会获得焦点并处于活动状态，这会“停用”此规则：

#main li:focus ul, #main a:active + ul{
display:block;
}

因此，链接（或更具体地说，包含链接的 ul）在对链接的点击完成之前消失了。

至少这似乎是 Firefox 处理它的方式。

编辑：它应该与添加选择器一起使用

#main li.username:active ul

以上规则。

于 2012-08-28T09:28:48.143 回答
3

将您的最终规则更改为：

#main li:focus ul, #main a:active + ul,
#main li ul:hover
{
display:block;
}

该#main li ul:hover规则意味着子菜单将保持打开足够长的时间以供点击注册。

参见分叉的 JS Fiddle

ps 很酷的技巧，我以前从未见过这样启动的选择框。

于 2012-08-28T09:43:45.617 回答