的CSS菜單無法點擊鏈接

我建了一個小的下拉菜單，不使用任何JavaScript，但它並不完全協同工作在Firefox和IE瀏覽器10.下面是什麼樣子：的CSS菜單無法點擊鏈接

兩個Link1和Link2是鏈接。在鉻，點擊它們工作正常 - 我按預期重定向。然而，在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

來源

2013-08-19 Mansfield

是否有避免JS的原因？ –

@DavidStarkey只有我想要沒有它的菜單（我認爲這應該是可能的）。但是如果我必須使用JS，我會:) – Mansfield

這個HTML模式是多餘的。 DIV和SPAN沒有真正的需要或目的。除了定位之外，您應該設計A標籤，而不是列表本身。 –

我終於想通了，發生了什麼事（或至少，我認爲我做了）。

當我專注於li.menu-item時，#user-sub-menu div顯得非常好。但是，如果我點擊該div內的某個元素（如其中一個鏈接），技術上li.menu-item元素已失去焦點並使div不可見。

我最好的猜測是，在處理焦點變化之前，chrome處理鏈接點擊，因此事情馬上就起作用。對於Firefox，我添加了以下CSS來保持#user-sub-menu div即使當li.menu-item失去焦點時也是如此。

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

因此，這現在可以在Firefox中正常工作。不幸的是，它仍然無法在IE中使用，所以如果其他人有任何見解，我很樂意聽到他們，但我會將其標記爲現在回答。

來源

2013-08-20 18:26:55 Mansfield

的CSS菜單無法點擊鏈接

回答

相關問題