悬停时子菜单消失？ 粘滞/固定导航

Question

我已经研究了很多解决这个问题的方法，但是还没有找到适合我的方法。 我有一个固定/固定导航。

当导航位于顶部时，子菜单不起作用。 但是，一旦开始滚动，则如果您返回导航，则该子菜单将起作用。 但是，如果您向上滚动到顶部，它将停止工作。

首先，非常感谢你们所有人的帮助。 我真的很感激有人花时间回答这个问题或我的其他任何问题。

 <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> // Llamado cuando se cargue la página posicionarMenu(); $(window).scroll(function() { posicionarMenu(); }); function posicionarMenu() { //var altura_del_header = $('header').outerHeight(true); var altura_del_header = $('header').outerHeight(true); var altura_del_menu = $('.navbar').outerHeight(true); var altura_adminbar = $('#wpadminbar').outerHeight(true); if ($(window).scrollTop() >= altura_del_header-altura_del_menu){ $('.navbar').addClass('fixed'); $('.navbar').css('top',(altura_adminbar)+'px'); $('.content').css('margin-top', (altura_del_menu-altura_adminbar) + 'px'); } else { $('.navbar').removeClass('fixed'); $('.content').css('margin-top', '0'); } } </script> 

 /** * 4.2 Navigation * ---------------------------------------------------------------------------- */ .main-navigation { clear: both; min-height: 45px; position: relative; width: 950px; margin: 0 auto; } ul.nav-menu, div.nav-menu > ul { margin-bottom: 0px; margin-top: 0px; background-color: none; font-weight: 500; position: relative; float: left; } .nav-menu li { display:inline-block !important; position: relative; } .nav-menu li a { color: #fff; font-weight:900; display:block; font-family: 'raleway'; font-size: 14px; text-transform: uppercase; letter-spacing: 3px; padding: 18px 50px 18px 0px; text-decoration: none; text-align: left; line-height: 1; opacity: 1; -webkit-font-smoothing: antialiased; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; } .nav-menu li:hover > a, .nav-menu li a:hover { color: #f286c3; -webkit-font-smoothing: antialiased; } .nav-menu .sub-menu, .nav-menu .children { background-color: transparent; display:none; border-top: 0; position: absolute; z-index:999999999; font-weight:600; text-transform: uppercase; white-space: nowrap; overflow: hidden; line-height:1; } .nav-menu .sub-menu, .nav-menu .children { } .nav-menu .sub-menu ul, .nav-menu .children ul { border-left: 0; left: 100%; top: 0px; } ul.nav-menu ul a, .nav-menu ul ul a { background-color: #000; color: #feeef9; margin: 0 auto; font-size:12px; text-align:center; font-weight:600; text-transform: uppercase; white-space: nowrap; overflow: hidden; padding: 15px 15px; } ul.nav-menu ul a:hover, .nav-menu ul ul a:hover { background-color: #777777; color: #feeef9; font-weight:600; } ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul { display: block; } .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a { color: #fff; } .menu-toggle { display: none; } .social-icons-widget{ position: relative; float: right; text-align: left; margin-top:10px; margin-bottom:-10px; } aside#simple-social-icons-2{ padding: 7px 0px 0px 0px; } /* Navbar */ .navbar { margin: 0 auto; width: 100%; background-color: #000; border-bottom: 2px dotted #c3c0ab; opacity:0.95; } 

 <div id="navbar" class="navbar"> <nav id="site-navigation" class="navigation main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3> <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> <div class="social-icons-widget"> <div id="social-widget"><?php if ( is_active_sidebar( 'social-footer' ) ) : dynamic_sidebar( 'social-footer' ); endif; ?></div> </div><!-- .widget-area --> <div class="searchbar"> <div class="container"> <form class="searchbox"> <input type="search" placeholder="Search......" name="s" class="searchbox-input" onkeyup="buttonUp();" required> <input type="submit" class="searchbox-submit" value=""> <span class="searchbox-icon"><img src="<?php bloginfo('template_directory') ?>/images/searchbar.png"></span> </form> </div> </div> </nav><!-- #site-navigation --> </div><!-- #navbar --> 

Answer 1

首先，感谢所有对此发表评论的人。

经过反复试验，我找到了解决问题的方法。 希望将解决方案发布给可能对其“固定/粘性导航+ Wordpress”有问题的任何人。

简而言之，我必须更改导航栏，而不是子菜单或导航菜单。 我的主要内容是覆盖子菜单下拉菜单。

我最终将以下内容添加到我的CSS中

      position: absolute;
      top:0px;
      z-index: 9999999;

因此，现在对导航栏进行修改。 看起来像：

.navbar {
    margin: 0 auto;
    width: 100%;
    background-color: #000;
    border-bottom: 2px dotted #c3c0ab;
        opacity:0.95;
        position: absolute;
        top:0px;
        z-index: 9999999;
}