Question

我开发了这个网站：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>

任何帮助我的人？

Answer 1

尝试使用stop(true,true)

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

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

Answer 2

你可以尝试低于黑客

以下是工作演示：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);

        }
    );

奇怪的下拉菜单jquery

2 个答案: