菜單欄消失後，我可以點擊它？

這是一個類似於I have a css drop down menu that disappears的問題，但這些解決方案並不適合我。在我點擊它之前，下拉菜單消失。它在Firefox上效果更好，但只有在快速移動光標時才行。菜單欄消失後，我可以點擊它？

任何想法？

整個菜單容器（所以，導航欄上的鏈接+懸停時出現的鏈接）的z-index爲1，如果有任何幫助的話。

此外，爲了使這個菜單我跟着這個教程非常密切：http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/

謝謝！

你說得對，斯科特，這裏的代碼：

HTML代碼

<nav> 
<ul> 
    <li style="background-color: #AECC4C;"><a href="">Home</a> 
    </li> 
    <li><a href="">How It Works</a> 
    <div class="menu-container-1"> 
     <div class="column-1"> 
     <a href="">Submenu 1</a> 
     </div> 
     <div class="column-1"> 
     <a href="">Submenu 2</a> 
     </div>            
    </div> 
    </li> 
    <li><a href="">Post Here</a></li> 
    <li><a href="">Blog</a> 
     <div class="menu-container-2"> 
      <div class="column-1"> 
       <a href="">Articles</a> 
      </div> 
      <div class="column-1"> 
       <a href="">Related links</a> 
      </div>           
     </div></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Contact</a></li> 
    <li style="text-decoration:underline"><a href="">Donate!</a></li> 
</ul> 
</nav>

CSS代碼

.menu-container-1, .menu-container-2 { 
z-index: 1; 
margin:10px auto; 
float:left; 
position:absolute; 
left:-999em; 
text-align:left; 
padding:10px 5px; 
border:1px dotted #b7b7b7; 
border-top:none; 
background:#ffffff; 
    } 

    .column-1, .column-2 { 
display:inline; 
float:left; 
position:relative; 
margin:2px 5px; 
    } 

     .column-1 a, .column-1 a:visited { 
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */ 
text-decoration: none; 
color: #000; 
     -webkit-transition: all .3s ease; 
     -moz-transition: all .2s ease; 
     -o-transition: all .2s ease; 
padding: 0px 0px 0px 0px; 
    } 

    .column-1 a:hover, .column-1 a:focus { 
color: #EB6110; 
    } 

    nav li:hover .menu-container-1 { 
left:170px; 
width: 120px; 
    } 

    nav li:hover .menu-container-2 { 
left:450px; 
width: 100px; 

    }

來源

2011-11-08 user1017566

會是什麼幫助你發佈你的一些相關的HTML和CSS代碼。 – ScottS

您可以將問題重新創建爲[jsFiddle demo]（http://jsfiddle.net/），或者提供一個鏈接到您的破損頁面？ – thirtydot

嗨，大家好，這裏是對的jsfiddle演示 http://jsfiddle.net/LfexE/embedded/result/ 一個鏈接，並使用代碼：http://jsfiddle.net/LfexE/ 在我的版本有一個小導航和下拉菜單之間的空間更少，但它基本上具有相同的問題。請務必以全屏模式觀看以獲得此主意。再次感謝！ – user1017566

一個解決辦法是顯式聲明的菜單頂部的距離包含divs：

nav li:hover .menu-container-1 { 
top: 11px; 
left:150px; 
width: 120px; 
} 

nav li:hover .menu-container-2 { 
top: 11px; 
left:420px; 
width: 100px; 
}

如果你的菜單項高度都是靜態的，這應該可以做到。

更新的jsfiddle：http://jsfiddle.net/LfexE/1/

來源

2011-11-09 17:28:28 ToddSmithSalter

謝謝，託德，這個伎倆！尷尬，但鬆了一口氣，它是這樣一個簡單的解決方案:) – user1017566

菜單欄消失後，我可以點擊它？

回答

相關問題