Question

以下是我正在处理的网站：test site

导航中的“引号”有一个显示在悬停上的子菜单。但是一旦向下滚动页面，子菜单就会停止正常工作。

这是我的jQuery代码，只有第一个块属于子菜单，但是如果你发现冲突我会包括其余部分：

$(document).ready(function(){

    // Dropdown Submenu

    $(function(){

        $("nav ul li").hover(
            function(){
                $('ul:first',this).css('visibility', 'visible');            
        },  function(){     
                $('ul:first',this).css('visibility', 'hidden');

        });

    });

    // Smooth Scroll

    $('a[href*=#]').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top}, 1000);
            return false;
    });

    // Header Shadow

    $(window).scroll(function(){
    var a = 5;
    var pos = $(window).scrollTop();
    if(pos > a) {
        $('header').addClass('bottom-shadow');
    }
    else {
        $('header').removeClass('bottom-shadow');
    }
    });


});

html：

<nav>..
    <ul>
        <li> <a href="#services">Services</a> </li>
        <li> <a href="#providers">Providers</a> </li>  
        <li> <a href="#plans">Plans</a> </li>                  
        <li> <a href="#quotes">Quotes</a> 
            <ul>
                <li><a href="#indiv">Individual / Family</a></li>
                <li><a href="#group">Business / Group</a></li>
            </ul>
        </li>
        <li> <a href="#about">About</a></li>
        <li> <a href="#contact">Contact</a> </li>                    
    </ul>                     
</nav>

CSS：

nav ul{
  list-style-type: none;
  margin-top: 22px;
  padding: 0;
  float: right;
  position: relative;
}
nav ul li{
  float: left;
  zoom: 1;
}
nav ul li a{
  display: block;
  text-decoration: none;
  line-height: 20px;
  padding: 10px 16px;
  font-size: 17px;
  color: #304F70;
}
nav ul ul{ 
  width: 180px; 
  visibility: hidden; 
  position: absolute; 
  top: 16px; 
  left: 270px; 
}
nav ul ul li{   
  font-weight: normal; 
  background: url(../images/white_texture_bg.jpg), repeat, #FFF;
  color: #000; 
  border-bottom: 1px dotted #B4AFAB; 
  float: none; 
}
nav ul ul li:last-child{
  border-bottom: none;
}             
nav ul ul li a{ 
  border-right: none; 
  width: 100%; 
  display: inline-block; 
  text-align: left;
}

请帮我弄清问题是什么。谢谢！

已编辑：在Chrome中无法正常使用，但在Firefox和Safari中无效。

Answer 1

删除main元素后，它可以正常工作。

编辑：

main和header之间的关系是相同级别的，因此您应该将结构更改为：

<body>
  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

Answer 2

我建议您查看以下链接：http://forum.jquery.com/topic/hover-not-working-for-chrome

jQuery for chrome中的.hover函数似乎存在问题。我相信你的功能

  $("nav ul li").hover(
        function(){
            $('ul:first',this).css('visibility', 'visible');            
    },  function(){     
            $('ul:first',this).css('visibility', 'hidden');

    });

仍然可能会被触发，因为滚动时，整个页面中有许多不同的“ul li”，你默认“悬停”过来，这样的代码被调用：$（'ul：first'，this ）.css（'visibility'，'hidden'）;向您需要访问的元素添加id可能会固有地解决此问题。

jquery悬停仅适用于主页（Chrome）

2 个答案: