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

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;
}