0

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

有人帮助我吗？

4

2 回答 2

0

尝试stop(true,true)

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

$(this).stop(true,true).slideDown(100);
于 2013-03-08T11:25:33.020 回答
0

您可以尝试低于 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);

        }
    );
于 2013-03-08T12:50:40.827 回答