Css菜单不可点击链接
Css菜单不可点击链接
提问于 2013-08-19 15:49:06
我在没有使用任何javascript的情况下构建了一个下拉菜单，但在firefox和IE 10中并不完全合作。
Link1和Link2都是链接。在铬，点击他们的工作很好-我被重定向，如预期。然而，在火狐和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
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-20 18:26:55
我最终弄明白了到底发生了什么(或者至少，我想我已经知道了)。
当我聚焦于li.menu-item时，#user-sub-menu div会显示为一切都很好。但是，如果我单击div中的一个元素(比如其中的一个链接)，技术上来说，li.menu-item元素失去了焦点，使div不可见。
我最好的猜测是，chrome在处理焦点更改之前处理了链接单击，因此事情马上就开始工作了。对于火狐，我添加了下面的css以保持#user-sub-menu div的打开，即使li.menu-item失去了焦点。
#user-sub-menu:active, #user-sub-menu:hover, #user-sub-menu:focus
{
display: block;
}因此，这现在在Firefox中运行得很好。不幸的是，它仍然不能在IE中工作，所以如果其他人有任何洞察力，我很高兴听到他们，但我会标记这一点，因为目前的答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18317938
复制相关文章
相似问题
腾讯云开发者
