jQuery在第一次悬停的下拉菜单上不起作用

我用CSS创建了一个简单的下拉菜单，并且想用jQuery创建一个fadein。淡入淡出效果，但是只有在将鼠标悬停在列表元素上两次之后。第一次悬停没有淡化效果。jQuery在第一次悬停的下拉菜单上不起作用

下面是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
    <title>dropdown_2</title> 


    <link href="css/dropDrownNav.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $("#nav li").has("ul").hover(function() { 
       $(this).addClass("current").children("ul").fadeIn(500); 
      }, function() { 
       $(this).removeClass("current").children("ul").stop(true, true).css("display", "none"); 
      }); 

     }); 
</script> 


</head> 
<body> 

    <!--begin added nav--> 
    <div id="main-navigation" > 
     <div id="nav"> 
     <ul> 
      <li class="first"><a href="#">Home</a> 
      <ul> 
       <li><a href="#">Home1</a></li> 
       <li><a href="#">Home2</a></li> 
       <li><a href="#">Home3</a></li> 
      </ul> 
      </li> 
      <li><a href="#">About Me</a> 
      <ul> 
       <li><a href="#">About Me1</a></li> 
       <li><a href="#">About Me2</a></li> 
       <li><a href="#">About Me3</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Portfolio</a> 
      <ul> 
       <li><a href="#">Web</a></li> 
       <li><a href="#">Print</a></li> 
       <li><a href="#">Photos</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Contact Me</a> 
      <ul> 
       <li><a href="#">Contact Me1</a></li> 
       <li><a href="#">Contact Me2</a></li> 
       <li><a href="#">Contact Me3</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
    </div><!--end main navigation--> 
    <!--end added nav--> 

</body> 
</html>

CSS代码：

*{ margin:0px; padding: 0px; } 

#nav { 
    font-family: arial, sans-serif; 
    position: relative; 
    width: 390px; 
    height:56px; 
    font-size:14px; 
    color:#000; 
    margin: 0px auto; 
} 

#nav ul { 
    list-style-type: none; 
} 

#nav ul li { 
    float: left; 
    position: relative; 
} 

#nav ul li a { 
    text-align: center; 
    border-right:1px solid #000; 
    padding:20px; 
    display:block; 
    text-decoration:none; 
    color:#000; 
} 

#nav ul li ul { 
    display: none 
} 

#nav ul li:hover ul { 
    display: block; 
    position: absolute; 
} 

#nav ul li:hover ul li a { 
    display:block; 
    background:#12aeef; 
    color:#ffffff; 
    width: 110px; 
    text-align: center; 
    border-bottom: 1px solid #f2f2f2; 
    border-right: none; 
} 

#nav ul li:hover ul li a:hover { 
    background:#6dc7ec; 
    color:#fff; 
}

链接到working example。

感谢，肯

来源

2012-11-22 Ken Shoufer

尝试删除显示：从该行的CSS块...

#nav ul li:hover ul { 
display: block; 
position: absolute; 
}

来源

2012-11-22 16:41:03

卸下显示：块的工作。谢谢您的帮助！ –

我增加了一个节目（）隐藏（）在你淡出线和它。似乎这样的工作：

$("#nav li").has("ul").hover(function() { 
    $(this).addClass("current").children("ul").show().hide().fadeIn(500);    
}, function() {     
    $(this).removeClass("current").children("ul").stop(true, true).css("display", "none");   
});

http://jsfiddle.net/ewQB2/1/

来源

2012-11-22 16:43:07 azzy81

是的。这也适用。谢谢。 –

jQuery在第一次悬停的下拉菜单上不起作用

回答

相关问题