奇怪的下拉菜单jquery答案

【问题标题】：Strange dropdown menu jquery奇怪的下拉菜单jquery
【发布时间】：2013-02-23 22:12:05
【问题描述】：

我开发了这个网站：http://loloey.com/forme/formeeng.html 我在页面左上角名为“Change Universe”的下拉菜单中有一个非常奇怪的问题：当我在这个下拉菜单上多次悬停时，下拉元素消失了！！！该问题在所有浏览器上都存在，例如 firefox、explorer 9、chrome 等。

我用一个简单的 jquery 代码创建了这个菜单：

$(document).ready(function () {     
$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).stop().slideDown(100);
    }, 
    function () {
        //hide its submenu
        $('ul', this).stop().slideUp(100);                      
    }
);

});

这是css：

/*---- CROSS BROWSER DROPDOWN MENU ----*/

#nav {

padding-left: 90px;
margin-top:-15px;
list-style: none;
float: left;
font-family: 'helveticaneuelight', Arial, sans-serif;
font-size: 9px;
color: #fff;
}   

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        float:left; 
        display:block; 
        width:70px; 
        background:#808184; 
        position:relative;
        z-index:500; 
        margin:0 1px;
    }

    /* this is the parent menu */
    #nav li a {
display: block;
padding: 5px 5px 4px 1px;
height: 11px;
text-decoration: none;
color: #58595B;
text-align: left;
    }

    #nav li a:hover {
        color:#fff;
    }

    /* you can make a different style for default selected value */
    #nav a.selected {
        color:#f00;
    }

    /* submenu, it's hidden by default */
    #nav ul {
        position:absolute; 
        left:0; 
        display:none; 
        margin:0 0 0 -1px; 
        padding:0; 
        list-style:none;
    }

    #nav ul li {
        width:70px; 
        float:left; 
    }

    /* display block will make the link fill the whole area of LI */
    #nav ul a {
display: block;
height: 15px;
padding: 4px 5px;
color: #58595B;
    }

    #nav ul a:hover {
        text-decoration:none;   
    }

    /* fix ie6 small issue */
    /* we should always avoid using hack like this */
    /* should put it into separate file : ) */
    *html #nav ul {
        margin:0 0 0 -2px;
    }

这是html：

<div id="cambia">
  <div class="top_a">CHANGE UNIVERSE:</div>
  <ul id="nav">


<li><a href="#">FORME</a>
  <ul>
    <li><a href="../grandfloor/grandflooreng.html">GRANDFLOOR</a></li>
    <li><a href="../gdo/gdoeng.html">GDO</a></li>
    <li><a href="../parsi/parsieng.html">PARSI</a></li>
  </ul>         
    <div class="clear"></div>
</li>   
  </ul>
</div>

有谁可以帮助我？

【问题讨论】：

UL 的高度降低到 0%。您可能希望修改选择器以仅影响主 LI，即 #nav > li
如果您快速将鼠标悬停在其中一个功能（slideDown 或 slideUp）上，它不会完成动画。我以前有这个问题。答案是-停止播放:)

标签： jquery html css drop-down-menu menu

【解决方案1】：

试试stop(true,true)

如果 clearQueue 参数的值为 true，则队列中的其余动画将被删除并且永远不会运行。

$(this).stop(true,true).slideDown(100);

【讨论】：

我尝试使用 $('ul', this).stop(true,true).slideDown(100);但它不起作用

【解决方案2】：

你可以试试下面的hack

这是工作演示：http://jsfiddle.net/QM73r/

...

$(document).ready(function () { 

    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).stop().slideDown(100);

        }, 
        function () {
            //hide its submenu
            $('ul').attr('style', 'display:block');
            $('ul', this).stop().slideUp(100);

        }
    );

【讨论】：