菜单栏消失后，我可以点击它？

这是一个类似于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

菜单栏消失后，我可以点击它？

回答

相关问题