悬停时CSS菜单损坏 - 闪烁效果

Question

当我将此示例缩小到移动尺寸时，会发生一件奇怪的事情。

如果您点击菜单中的“Link2”，您会看到其子菜单已被切断，如果您尝试将鼠标悬停在子菜单下方的链接上，则会发生强烈闪烁。

这是为什么？有人可以帮我解决这个问题吗？

感谢您的帮助： - ）

DEMO： http://jsfiddle.net/qefszucv/

$( document ).ready(function() {
	$('nav.primary').prepend('<div id="menu-button">Sports Menu</div>');
		$('nav.primary #menu-button').on('click', function(){
			var menu = $(this).next('ul');
			if (menu.hasClass('open')) {
			  menu.removeClass('open');
			} else {
			  menu.addClass('open');
			}
	});

	$('.inline .menu-item-has-children a').click(function () {

	    //Expand or collapse this panel
	    $(this).next('ul').slideToggle();
	    $(this).closest('li').siblings().children('ul').slideUp();
	});

});

/* import */
/* line 1, sass/components/_reset.scss */
div, ul, ol, h1, h2, h3, h4, h5, h6, p, html, body {
  margin: 0;
  padding: 0;
}

/* line 1, sass/components/_globals.scss */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 7, sass/components/_globals.scss */
.left {
  float: left;
}

/* line 11, sass/components/_globals.scss */
.right {
  float: right;
}

/* line 15, sass/components/_globals.scss */
.center {
  margin: 0 auto;
}

/* line 24, sass/components/_globals.scss */
ul.naked, ol.naked {
  list-style: none;
}
/* line 30, sass/components/_globals.scss */
ul.horizontal, ul.inline, ol.horizontal, ol.inline {
  /**
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    contenteditable attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that are clearfixed.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */
  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  *zoom: 1;
}
/* line 31, sass/components/_globals.scss */
ul.horizontal li, ul.inline li, ol.horizontal li, ol.inline li {
  float: left;
}
/* line 65, sass/components/_espresso.scss */
ul.horizontal:before, ul.horizontal:after, ul.inline:before, ul.inline:after, ol.horizontal:before, ol.horizontal:after, ol.inline:before, ol.inline:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
/* line 71, sass/components/_espresso.scss */
ul.horizontal:after, ul.inline:after, ol.horizontal:after, ol.inline:after {
  clear: both;
}

/* line 42, sass/components/_globals.scss */
.text-left {
  text-align: left;
}

/* line 42, sass/components/_globals.scss */
.text-right {
  text-align: right;
}

/* line 42, sass/components/_globals.scss */
.text-center {
  text-align: center;
}

/* line 47, sass/components/_globals.scss */
.circle {
  display: block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  border: 6px solid;
  border-color: #ffffff;
  height: 156px;
  width: 156px;
}

/* line 62, sass/components/_globals.scss */
.columns img {
  min-width: 100%;
  max-width: 100%;
  height: auto;
}

/* line 68, sass/components/_globals.scss */
img.no-scale {
  min-width: 0;
  max-width: none !important;
  width: auto;
  display: block;
}

/* line 76, sass/components/_globals.scss */
.display-table {
  display: table;
  width: 100%;
  height: 100%;
}
/* line 81, sass/components/_globals.scss */
.display-table .center-center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* line 19, sass/components/_grid.scss */
.row {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1180px;
}
/* line 12, sass/components/_grid.scss */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* line 28, sass/components/_grid.scss */
.row .row {
  margin-left: -11px;
  margin-right: -11px;
  width: auto;
}
/* line 36, sass/components/_grid.scss */
.row.colapse .column, .row.colapse .columns {
  padding: 0;
}
/* line 40, sass/components/_grid.scss */
.row.colapse .row {
  margin: 0;
}

/* line 47, sass/components/_grid.scss */
.column, .columns {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 11px;
  padding-right: 11px;
  width: 100%;
  min-height: 1px;
  float: left;
}
/* line 59, sass/components/_grid.scss */
.column.end, .columns.end {
  float: right;
}






















/* line 1, sass/components/_navigation.scss */
.menu {
  font-family: "proxima-nova";
  padding-top: 3%;
  position: static;
}
/* line 8, sass/components/_navigation.scss */
.menu a {
  color: #63615a;
  font-size: 1.2em;
  text-decoration: none;
  text-transform: lowercase;
}
/* line 14, sass/components/_navigation.scss */
.menu a:hover {
  color: #748d1b;
}

/* line 21, sass/components/_navigation.scss */
.primary-item {
  margin-right: 2em;
  float: left;
}

/* line 27, sass/components/_navigation.scss */
.primary-item:hover .sub-menu {
  max-height: 300px;
  padding-top: 27px;
  padding-bottom: 63px;
}
/* line 36, sass/components/_navigation.scss */
.primary-item:hover .sub-menu a {
  opacity: 1;
}

/* line 41, sass/components/_navigation.scss */
.sub-menu {
  max-height: 0px;
  width: 100%;
  overflow-y: hidden;
  white-space: nowrap;
  position: absolute;
  top: 97px;
  left: -20px;
  right: -20px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 0;
  padding-bottom: 0;
  /*background-color:rgb(228,228,228);*/
  background: #f2f2f2;
  transition: all 0.3s ease-in;
  list-style: none;
}
/* line 60, sass/components/_navigation.scss */
.sub-menu a {
  opacity: 0;
  transition: all 0.3s ease-in;
}
/* line 73, sass/components/_navigation.scss */
.sub-menu > li {
  width: 25%;
  float: left;
}
/* line 77, sass/components/_navigation.scss */
.sub-menu > li > a {
  font-size: 1.2em;
}

/* line 84, sass/components/_navigation.scss */
.sub-menu .sub-menu {
  width: 100%;
  list-style: none;
  padding-top: 25px;
  position: relative;
  top: 0;
}

/* line 92, sass/components/_navigation.scss */
.sub-menu .sub-menu li {
  float: none;
  width: 100%;
}

/* line 97, sass/components/_navigation.scss */
.sub-menu .sub-menu li a {
  font-size: 14px;
}









@media only screen and (max-width: 767px) {
  /* line 290, sass/_layout.scss */
  footer {
    padding-left: 50px;
  }

  /* line 291, sass/_layout.scss */
  nav.columns {
    padding-left: 0;
  }

  /* line 292, sass/_layout.scss */
  nav.columns ul {
    padding-left: 45px;
  }
}


@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  /* line 377, sass/_layout.scss */
  img.logo {
    min-width: 100%;
  }

  /* line 380, sass/_layout.scss */
  nav.columns ul {
    padding-left: 0px;
  }

  /* line 384, sass/_layout.scss */
  nav.primary {
    padding-top: 0;
  }

  /* line 387, sass/_layout.scss */
  nav.primary > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }

  /* line 396, sass/_layout.scss */
  nav.primary > ul > li > ul {
    width: 100%;
    display: block;
  }

  /* line 400, sass/_layout.scss */
  nav.primary.align-right ul li a {
    text-align: left;
  }

  /* line 403, sass/_layout.scss */
  nav.primary > ul > li > ul > li {
    width: 100%;
    display: block;
  }

  /* line 407, sass/_layout.scss */
  nav.primary.align-right ul ul li a {
    text-align: left;
  }

  /* line 410, sass/_layout.scss */
  nav.primary > ul > li > ul > li > a {
    width: 100%;
    display: block;
  }

  /* line 414, sass/_layout.scss */
  nav.primary ul li ul li a {
    width: 100%;
  }

  /* line 417, sass/_layout.scss */
  nav.primary.align-center > ul {
    text-align: left;
  }

  /* line 420, sass/_layout.scss */
  nav.primary.align-center > ul > li {
    display: block;
  }

  /* line 423, sass/_layout.scss */
  nav.primary > ul.open {
    max-height: 1000px;
  }

  /* line 426, sass/_layout.scss */
  nav.primary ul {
    width: 100%;
  }

  /* line 429, sass/_layout.scss */
  nav.primary ul > li {
    float: none;
    width: 100%;
  }

  /* line 433, sass/_layout.scss */
  nav.primary ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
  }

  /* line 440, sass/_layout.scss */
  nav.primary ul > li:after {
    display: none;
  }

  /* line 443, sass/_layout.scss */
  nav.primary ul li.has-sub > a:after,
  nav.primary ul li.has-sub > a:before,
  nav.primary ul li ul li.has-sub:after,
  nav.primary ul li ul li.has-sub:before {
    display: none;
  }

  /* line 449, sass/_layout.scss */
  nav.primary ul li ul,
  nav.primary ul li ul li ul,
  nav.primary ul li ul li:hover > ul,
  nav.primary.align-right ul li ul,
  nav.primary.align-right ul li ul li ul,
  nav.primary.align-right ul li ul li:hover > ul {
    left: 0;
    position: relative;
    right: auto;
  }

  /* line 459, sass/_layout.scss */
  nav.primary ul li ul li,
  nav.primary ul li:hover > ul > li {
    max-height: 999px;
    position: relative;
    background: none;
  }

  /* line 465, sass/_layout.scss */
  nav.primary ul li ul li a {
    padding: 0px 20px 0px 35px;
  }

  /* line 468, sass/_layout.scss */
  nav.primary ul li ul ul li a {
    padding: 0px 20px 0px 50px;
  }

  /* line 471, sass/_layout.scss */
  nav.primary ul li ul li:hover > a {
    color: #000000;
  }

  /* line 474, sass/_layout.scss */
  nav.primary #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 20px 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #111;
    cursor: pointer;
  }

  /* line 488, sass/_layout.scss */
  nav.primary #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }

  /* line 499, sass/_layout.scss */
  nav.primary #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }

  /* line 509, sass/_layout.scss */
  .sub-menu {
    transition: none;
    top: 0;
    max-height: 100%;
    margin-bottom: 0;
    background: white;
  }

  /* line 510, sass/_layout.scss */
  .sub-menu li {
    display: block;
  }

  /* line 511, sass/_layout.scss */
  .sub-menu a {
    opacity: 1;
  }

  /* line 512, sass/_layout.scss */
  .sub-menu .sub-menu {
    padding-top: 0;
    display: none;
  }

  /* line 516, sass/_layout.scss */
  .primary-item:hover .sub-menu {
    padding: 0;
  }

  /* line 519, sass/_layout.scss */
  li.primary-item {
    padding-bottom: 20px;
  }

  /* line 523, sass/_layout.scss */
  .entry {
    margin-bottom: 30px;
  }

  /* line 527, sass/_layout.scss */
  .category-container {
    display: inline-block;
    margin-bottom: 40px;
  }
}

















@media screen and (max-width: 480px) {
  /* line 537, sass/_layout.scss */
  .sticky-header {
    padding-top: 0px;
    position: absolute;
  }
  /* line 541, sass/_layout.scss */
  .sticky-header .menu {
    background: url("../images/logo.png") 95% 10px no-repeat;
    background-size: 145px 55px;
  }

  /* line 547, sass/_layout.scss */
  footer {
    padding-left: 0px;
  }

  /* line 551, sass/_layout.scss */
  .logo {
    display: none;
  }

  /* line 555, sass/_layout.scss */
  nav.primary #menu-button {
    padding: 30px 20px 10px 20px;
  }

  /* line 559, sass/_layout.scss */
  footer ul li {
    border: 0;
    display: block;
    width: 100%;
    padding: 0 20px !important;
  }

  /* line 566, sass/_layout.scss */
  nav.primary #menu-button:after,
  nav.primary #menu-button:before {
    display: none;
  }

  /* line 571, sass/_layout.scss */
  .columns img.logo {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 145px;
    min-width: 145px;
  }
}





@media screen and (max-width: 480px) {
  /* line 603, sass/_layout.scss */
  li.primary-item {
    background: #ddd;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 2px solid #ccc;
  }

  /* line 609, sass/_layout.scss */
  li.primary-item a {
    display: block;
  }

  /* line 612, sass/_layout.scss */
  .sub-menu li.menu-item-has-children a {
    color: #748d1b;
  }

  /* line 615, sass/_layout.scss */
  .sub-menu .sub-menu {
    display: block;
  }

  /* line 618, sass/_layout.scss */
  nav.primary ul li ul ul li a {
    padding: 0px 20px 0px 35px;
  }

  /* line 621, sass/_layout.scss */
  .sub-menu .sub-menu li a {
    font-size: 17px;
    color: #ccc;
  }

  /* line 625, sass/_layout.scss */
  ul.sub-menu .menu-item-has-children {
    padding-top: 10px;
    margin-bottom: 10px;
  }

  /* line 629, sass/_layout.scss */
  main {
    float: left;
  }

  /* line 633, sass/_layout.scss */
  .accordion-toggle {
    cursor: pointer;
  }

  /* line 636, sass/_layout.scss */
  .primary-item > .sub-menu {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header class="main-header " style="background-image:url('');">

			<div class="sticky-header">
			<div class="row ">

<nav class="medium-8 columns primary menu" style="background:red">
    
<ul class="inline naked">
	<li class="primary-item"><a href="http://localhost:8888/sportsy/wordpress">Link 1</a></li>						
	<li id="menu-item-142" class="primary-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-142"><a href="#">This is Link Number 2</a>
		<ul class="sub-menu">
			<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost:8888/sportsy/wordpress/?page_id=45">Sub1</a>
			<ul class="sub-menu">
				<li id="menu-item-77" class="sub-sub-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost:8888/sportsy/wordpress/?page_id=47">Test</a></li>
				<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost:8888/sportsy/wordpress/?page_id=49">Test</a></li>
			</ul>
		</li>
			<li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><a href="http://localhost:8888/sportsy/wordpress/?page_id=35">Sub2</a>
			<ul class="sub-menu">
				<li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="http://localhost:8888/sportsy/wordpress/?page_id=37">Test</a></li>
				<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="http://localhost:8888/sportsy/wordpress/?page_id=39">Test</a></li>
				<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="http://localhost:8888/sportsy/wordpress/?page_id=41">Test</a></li>
				<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://localhost:8888/sportsy/wordpress/?page_id=43">Test</a></li>
			</ul>
		</li>
			<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-84"><a href="http://localhost:8888/sportsy/wordpress/?page_id=51">Sub3</a>
			<ul class="sub-menu">
				<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://localhost:8888/sportsy/wordpress/?page_id=53">Test</a></li>
				<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://localhost:8888/sportsy/wordpress/?page_id=55">Test</a></li>
				<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://localhost:8888/sportsy/wordpress/?page_id=57">Test</a></li>
				<li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://localhost:8888/sportsy/wordpress/?page_id=59">Test</a></li>
			</ul>
		</li>
			<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://localhost:8888/sportsy/wordpress/?page_id=61">Sub4</a>
				<ul class="sub-menu">
					<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="http://localhost:8888/sportsy/wordpress/?page_id=53">Test</a></li>
					<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a href="http://localhost:8888/sportsy/wordpress/?page_id=55">Test</a></li>
					<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://localhost:8888/sportsy/wordpress/?page_id=57">Test</a></li>
					<li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="http://localhost:8888/sportsy/wordpress/?page_id=59">Test</a></li>
				</ul>
			</li>
		</ul>
		</li>
		<li id="menu-item-89" class="primary-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-89"><a href="http://localhost:8888/sportsy/wordpress/?page_id=31">Link 3</a>
		<ul class="sub-menu">
			<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://localhost:8888/sportsy/wordpress/?page_id=92">Test</a></li>
			<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://localhost:8888/sportsy/wordpress/?page_id=97">Test</a></li>
			<li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://localhost:8888/sportsy/wordpress/?page_id=94">Test</a></li>
		</ul>
		</li>
	</ul>
</nav>
                
                </div>
                
                    </div>
                    
</header>

Answer 1

有些事情，首先你可能不需要$(document).ready(function(){});你可以只使用美元符号：

$('nav.primary').prepend('<div id="menu-button">Sports Menu</div>');

$('nav.primary #menu-button').on('click', function(){
    var menu = $(this).next('ul');
    if (menu.hasClass('open')) {
      menu.removeClass('open');
    } else {
      menu.addClass('open');
    }
});

$('.inline .menu-item-has-children a').click(function () {

    //Expand or collapse this panel
    $(this).next('ul').slideToggle();
    $(this).closest('li').siblings().children('ul').slideUp();
});

接下来，您可以替换它：

if (menu.hasClass('open')) {
    menu.removeClass('open');
} else {
    menu.addClass('open');
}

有了这个：

menu.toggleClass('open');

闪烁正在发生，因为菜单离下拉列太远了。我将删除子菜单中的css top值。

动画放缓是我不太确定的事情，但我认为它比实现动画要困难得多。