我使用过jQueryScript.net上的jQuery Mega菜单，它在我的测试服务器上工作得很好，并且当我将它移动到最终会继续运行的网站时工作正常，但是无论出于何种原因，在我没有对与之相关的任何内容进行任何更改之后，它现在已经在实际网站上破坏了。我花了几个小时试图找到解决方案，并希望有人可能在过去遇到过类似的问题。
以下是我在测试链接中运行良好的测试链接：http://sandbox.corybolles.com/ms_mega_menu/
以下是实际网站：https://www.millenniumseating.com/?sessionthemeid=28
作为旁注，这是我第一次使用SO，所以如果我使用这个完全错误请告诉我，我不是想让任何人为我做我的工作，我只是在寻找一些我可能忽略的观点。
更新：这是相关的 JS
(function() {
(jQuery)('#header-wrapper ul.dropdown').hover(function() {
$(this).parent().find('> a').addClass('expanded-menu');
}, function() {
$(this).parent().find('> a').removeClass('expanded-menu');
});
(jQuery).fn.megamenu = function(width) {
var $that = (jQuery)(this),
$window = (jQuery)(window);
function update() {
$that.find('.megamenu').each(function() {
var $this = (jQuery)(this),
windowW = $window.width(),
offSetLeft = $this.offset().left,
parentWidth = $this.width(),
megaMenuCols = $this.find('> .dropdown > li.has-dropdown').length,
megaMenuWidth, mainMenuWidth = $('#top .top-bar').width(),
dropdownWidth = 295,
longestMenu = 1;
$this.find('> .dropdown > li.has-dropdown > .dropdown').each(function() {
var currentLength = (jQuery)(this).find('> li').length;
if (currentLength > longestMenu) {
longestMenu = currentLength;
}
});
$this.find('> .dropdown > li.has-dropdown > .dropdown').each(function() {
var $dropdown = (jQuery)(this);
var currentLength = $dropdown.find('> li').length;
if (currentLength < longestMenu) {
for (var i = 1; i <= longestMenu - currentLength; i++) {
$dropdown.append('<li class="empty-megamenu"></li>');
}
}
});
dropdownWidth = mainMenuWidth / megaMenuCols;
var megaMenuWidth = megaMenuCols * dropdownWidth > width ? width : mainMenuWidth,
blankGutterW = windowW * 0.9 < width ? windowW * 0.05 : (windowW - width) / 2;
var megaMenuRight = megaMenuWidth / 2 - parentWidth / 2;
megaMenuRight = (megaMenuWidth / 2 > offSetLeft + parentWidth / 2 - blankGutterW) ? width - (offSetLeft + parentWidth) : megaMenuRight;
var megaMenuPosition = windowW - offSetLeft - parentWidth - blankGutterW
if (windowW > 1300 || megaMenuRight > megaMenuPosition) {
megaMenuRight = megaMenuPosition;
}
$this.find('> .dropdown > li.has-dropdown').css('width', dropdownWidth + 'px');
$this.find('> .dropdown > li.has-dropdown > .dropdown').css({
'width': dropdownWidth + 'px',
'min-width': dropdownWidth + 'px'
});
$this.find('> .dropdown').css({
'width': megaMenuWidth + 'px',
'right': -megaMenuRight + 'px'
});
});
$that.find('li:not(.megamenu).has-dropdown > .dropdown').each(function() {
var $this = (jQuery)(this);
var windowW = (jQuery)(window).width(),
offSetLeft = $this.offset().left;
if ($this.width() + offSetLeft > windowW) {
$this.css({
'left': '-100%',
'max-width': '100%'
});
}
});
}
$(window).resize(update);
update();
};
(function hoverdelay() {
(jQuery)('#top .top-bar:not(.expanded) .top-bar-section li.has-dropdown').each(function() {
var $this = (jQuery)(this),
menuTimeoutShow, menuTimeoutHide;
$this.on("mouseenter tap", function(e) {
if (e.type == "tap") e.stopPropagation();
clearTimeout(menuTimeoutShow);
clearTimeout(menuTimeoutHide);
menuTimeoutShow = setTimeout(function() {
$this.addClass("hippo-menu-hovered");
if ($this.hasClass("hippo-menu-hovered")) {
$this.children('ul').stop().css("visibility", "visible").animate({
"opacity": 1
}, 200);
}
}, 300);
});
$this.on("mouseleave", function(e) {
clearTimeout(menuTimeoutShow);
clearTimeout(menuTimeoutHide);
menuTimeoutHide = setTimeout(function() {
$this.removeClass("hippo-menu-hovered");
if (!$this.hasClass("hippo-menu-hovered")) {
$this.children("ul").css({
"opacity": 0,
"visibility": "hidden"
});
}
}, 300);
});
});
})();
})(jQuery);
(jQuery)('.top-bar-section').megamenu(1200);
和CSS
.right {
float: right!important;
}#
header - wrapper {
position: absolute;background: #333;color:# fff;width: 100 % ;margin: 0 auto; - webkit - box - shadow: 0 0 3 px 1 px rgba(0, 0, 0, 0.12); - moz - box - shadow: 0 0 3 px 1 px rgba(0, 0, 0, 0.12);box - shadow: 0 0 3 px 1 px rgba(0, 0, 0, 0.12);z - index: 10000;
}.top - bar {
position: relative;height: 60 px;line - height: 60 px;background - color: transparent;overflow: hidden; - webkit - transition: height 0.4 s ease - out; - moz - transition: height 0.4 s ease - out; - o - transition: height 0.4 s ease - out;transition: height 0.4 s ease - out;
}.top - bar - section li.megamenu {
width: 100 % ;
}.top - bar - section li.megamenu > .dropdown {
min - width: 100 % ;
right: auto;
left: 100 % ;
}.top - bar - section > ul > li.megamenu > .dropdown > li.has - dropdown, .top - bar - section > ul > li.megamenu > .dropdown > li.has - dropdown > .dropdown {
width: 210 px;
}.top - bar ul {
margin - bottom: 0;
list - style: none;
}.top - bar.row {
max - width: none;
}.top - bar form, .top - bar input {
margin - bottom: 0 px;
}.top - bar input {
height: 2.45e m;
}.top - bar.button {
padding - top: .5e m;
padding - bottom: .5e m;
margin - bottom: 0;
}.top - bar.title - area {
position: relative;margin: 0;
}.top - bar.name, .top - bar.name a {
line - height: 60 px;
height: 60 px;
}.top - bar.name a {
font - size: 20 px;
font - weight: bold;
color: #fff;
width: 50 % ; - webkit - transition: none; - moz - transition: none; - o - transition: none;
transition: none;
}.top - bar.toggle - topbar a, .top - bar.expanded.toggle - topbar a {
display: none;color: #f4f4f4; - webkit - transition: none; - moz - transition: none; - o - transition: none;transition: none;
}.top - bar.expanded.toggle - topbar a span {
-webkit - box - shadow: 0 10 px 0 1 px #888888,0 16px 0 1px # 888888, 0 22 px 0 1 px #888888;-moz-box-shadow:0 10px 0 1px # 888888, 0 16 px 0 1 px #888888,0 22px 0 1px # 888888;
box - shadow: 0 10 px 0 1 px #888888,0 16px 0 1px # 888888, 0 22 px 0 1 px #888888;}.top-bar-section{position:relative;left:0;width:auto;-webkit-transition:left 0.35s cubic-bezier(.58,.25,.2,.93);-moz-transition:left 0.35s cubic-bezier(.58,.25,.2,.93);-o-transition:left 0.35s cubic-bezier(.58,.25,.2,.93);transition:left 0.35s cubic-bezier(.58,.25,.2,.93);}.top-bar-section ul{width:100%;height:auto;display:block;margin:0;}.top-bar-section .divider,.top-bar-section [role= "separator"] {
border - bottom: solid 1 px# f4f4f4;
border - top: solid 1 px# f4f4f4;
clear: both;
height: 1 px;
width: 100 % ;
}.top - bar - section ul li > a {
display: block;width: 100 % ;color: #fff;padding: 12 px 0;font - size: 1e m; - webkit - transition: none; - moz - transition: none; - o - transition: none;transition: none;
}.top - bar - section ul li.active > a {
background: #fff;color: #949494;}.top-bar-section .has-form{padding:15px;}.top-bar-section ul.dropdown li:not(.has-dropdown)>a:hover,.top-bar.expanded ul li:not(.has-dropdown)>a:hover{color:# eaeaea;background - color: #656565;}.top-bar-section .dropdown{position:absolute;left:100%;top:60px;visibility:hidden;opacity:0;}.top-bar-section .dropdown li{width:100%;height:auto;}.top-bar-section .dropdown li a{white-space:nowrap;font-weight:normal;-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;}.top-bar-section .dropdown label{padding:8px 15px 2px;margin-bottom:0;text-transform:uppercase;color:# fff;font - weight: bold;font - size: 0.625e m;
}.top - bar - js - breakpoint {
width: 900 px!important;visibility: hidden;
}.js - generated {
display: block;
}.mini - search {
display: none;
}
body.mobile.parallax - section, .off - canvas - wrap.move - left.parallax - section {
background - attachment: scroll!important;
background - position: 50 % 0!important;
}.mobile - slide - menu {
display: block;
}
a.exit - off - canvas.mobile - menu - off {
background - color: #333333!important;position:relative!important;width:260px!important;height:40px!important;line-height:40px;padding-left:30%;}a.exit-off-canvas.mobile-menu-off i{vertical-align:-1px;}a.exit-off-canvas.mobile-menu-off span{color:rgba(255,255,255,0.7);}.left-off-canvas-menu,.right-off-canvas-menu{width:260px;top:0;bottom:0;height:100%;position:absolute;overflow-y:auto;background:# 333333;
z - index: 1001;
box - sizing: content - box;
}.right - off - canvas - menu.dropdown li.has - dropdown {
position: relative;
}.right - off - canvas - menu.dropdown li.has - dropdown.off - canvas - dropdown {
position: absolute;left: 74 % ;top: 0;width: 50 px;height: 42 px;text - align: right;padding - top: 13 px;padding - right: 11 px;color: #fff;cursor: pointer;
}.right - off - canvas - menu.dropdown li.has - dropdown.off - canvas - dropdown: hover {
color: #222;}.right-off-canvas-menu .dropdown .dropdown{display:none;}section.left-small,section.right-small{width:2.8125rem;height:2.8125rem;position:absolute;top:0;}nav.tab-bar{background:transparent;color:# fff;height: 30 px;line - height: 2.8125 rem;position: relative;position: absolute;top: 35 px;width: 30 px;right: 5 % ;z - index: 20000;
}
nav.tab - bar a i {
font - size: 30 px;
vertical - align: middle;
color: #656565!important;}nav.tab-bar h1,nav.tab-bar h2,nav.tab-bar h3,nav.tab-bar h4,nav.tab-bar h5,nav.tab-bar h6{color:white;font-weight:bold;line-height:2.8125rem;margin:0;}nav.tab-bar h1,nav.tab-bar h2,nav.tab-bar h3,nav.tab-bar h4{font-size:1.125rem;}section.left-small{border-right:solid 1px # 1 a1a1a;
box - shadow: 1 px 0 0 #4d4d4d;left:0;}section.right-small{border-left:solid 1px # 4 d4d4d;
box - shadow: -1 px 0 0 #1a1a1a;right:0;}section.tab-bar-section{padding:0 0.625rem;position:absolute;text-align:center;height:2.8125rem;top:0;}section.tab-bar-section.left{left:0;right:2.8125rem;}section.tab-bar-section.right{left:2.8125rem;right:0;}section.tab-bar-section.middle{left:2.8125rem;right:2.8125rem;}a.menu-icon{width:30px;height:30px;display:block;line-height:30px;padding:0;color:white;position:relative;}a.menu-icon span{position:absolute;display:block;width:1rem;height:0;left:0.8125rem;top:0.3125rem;-webkit-box-shadow:0 10px 0 1px white,0 16px 0 1px white,0 22px 0 1px white;box-shadow:0 10px 0 1px white,0 16px 0 1px white,0 22px 0 1px white;}a.menu-icon:hover span{-webkit-box-shadow:0 10px 0 1px # b3b3b3, 0 16 px 0 1 px# b3b3b3, 0 22 px 0 1 px# b3b3b3;
box - shadow: 0 10 px 0 1 px# b3b3b3, 0 16 px 0 1 px# b3b3b3, 0 22 px 0 1 px# b3b3b3;
}.left - off - canvas - menu {
-webkit - transform: translate3d(-100 % , 0, 0); - moz - transform: translate3d(-100 % , 0, 0); - ms - transform: translate3d(-100 % , 0, 0); - o - transform: translate3d(-100 % , 0, 0);
transform: translate3d(-100 % , 0, 0);
}.right - off - canvas - menu {
-webkit - transform: translate3d(100 % , 0, 0); - moz - transform: translate3d(100 % , 0, 0); - ms - transform: translate3d(100 % , 0, 0); - o - transform: translate3d(100 % , 0, 0);
transform: translate3d(100 % , 0, 0);
right: 0;
}
ul.off - canvas - list {
list - style - type: none;
padding: 0 0 0 3 px;
margin: 0;
}
ul.off - canvas - list li label {
padding: 0.3 rem 0.9375 rem;color: #999999;text-transform:uppercase;font-weight:bold;background:# 444444;border - top: 1 px solid #5e5e5e;border-bottom:none;margin:0;}ul.off-canvas-list li a{display:block;padding:0.66667rem;color:rgba(255,255,255,0.7);border-bottom:1px solid # 3 D3D3D;
}.move - right > .inner - wrap {
-webkit - transform: translate3d(260 px, 0, 0); - moz - transform: translate3d(260 px, 0, 0); - ms - transform: translate3d(260 px, 0, 0); - o - transform: translate3d(260 px, 0, 0);
transform: translate3d(260 px, 0, 0);
}.move - right a.exit - off - canvas {
transition: background 300 ms ease;cursor: pointer;box - shadow: -4 px 0 4 px rgba(0, 0, 0, 0.5),
4 px 0 4 px rgba(0, 0, 0, 0.5);display: block;position: absolute;background: rgba(255, 255, 255, 0.2);top: 0;bottom: 0;left: 0;right: 0;width: 100 % ;height: 100 % ;z - index: 50000;
}.move - left > .inner - wrap {
-webkit - transform: translate3d(-260 px, 0, 0); - moz - transform: translate3d(-260 px, 0, 0); - ms - transform: translate3d(-260 px, 0, 0); - o - transform: translate3d(-260 px, 0, 0);
transform: translate3d(-260 px, 0, 0);
}.move - left a.exit - off - canvas {
transition: background 500 ms ease;cursor: pointer;box - shadow: -4 px 0 4 px rgba(0, 0, 0, 0.5),
4 px 0 4 px rgba(0, 0, 0, 0.5);display: block;position: absolute;background: rgba(255, 255, 255, 0.3);top: 0;bottom: 0;left: 0;right: 0;width: 100 % ;height: 100 % ;z - index: 50000;
}.ie9.left - off - canvas - menu {
left: -260 px;
}.ie9.right - off - canvas - menu {
right: -260 px;
}.ie9.move - left > .inner - wrap {
right: 260 px;
}.ie9.move - right > .inner - wrap {
left: 260 px;
}
@media only screen and(min - width: 900 px) {#
top,
.top - bar {
-webkit - transition: height 0.2 s linear!important; - moz - transition: height 0.2 s linear!important; - o - transition: height 0.2 s linear!important;
transition: height 0.2 s linear!important;
}.top - bar - section > ul > li > a,
.top - bar.name a,
.mini - search.searchform {
-webkit - transition: line - height 0.18 s linear, color 0.5 s ease!important; - moz - transition: line - height 0.18 s linear, color 0.5 s ease!important; - o - transition: line - height 0.18 s linear, color 0.5 s ease!important;
transition: line - height 0.18 s linear, color 0.5 s ease!important;
}.top - bar - section ul li {
position: relative;list - style: none;
}.top - bar - section > ul > li li.has - dropdown: hover > .dropdown {
opacity: 1;
}.top - bar - section li.hippo - menu - hovered: hover > .dropdown,
.top - bar - section li.hippo - menu - hovered > .dropdown,
.top - bar - section li.hippo - menu - hovered.megamenu.dropdown,
.top - bar - section li.hippo - menu - hovered.megamenu: hover.dropdown {
visibility: visible!important;opacity: 1!important;
}.top - bar: not(.expanded).top - bar - section > ul > li > a {
border - bottom: none!important;
display: inline - block;
line - height: 60 px;
}.top - bar: not(.expanded).top - bar - section > ul > li > a: before {
opacity: 0;
}.top - bar: not(.expanded).top - bar - section > ul > li > a.expanded - menu: before {
opacity: 0.7;width: 6 px;height: 6 px;margin - left: -3 px; - webkit - animation: breathing 2.5 s infinite linear; - moz - animation: breathing 2.5 s infinite linear; - o - animation: breathing 2.5 s infinite linear;animation: breathing 2.5 s infinite linear;
}.top - bar: not(.expanded).top - bar - section > ul > li > a: hover: before {
opacity: 0.7;
}#
top {
height: 60 px;background: #fff;width: 100 % ;
}.top - bar - section > ul > li[class *= "current"] > a,
.small - nav ul li[class *= "current"] > a {
color: #949494;}.top-bar{*zoom:1;overflow:visible;}.top-bar:before,.top-bar:after{content:" ";display:table;}.top-bar:after{clear:both;}.top-bar .toggle-topbar{display:none;}.top-bar .title-area{float:left;}.top-bar .name a{width:auto;}.top-bar input,.top-bar .button{line-height:2em;font-size:0.9em;height:2em;padding:0 10px;position:relative;top:0;}.top-bar.expanded{background:# fff;
}.contain - to - grid.top - bar {
max - width: 75e m;
margin: 0 auto;
margin - bottom: 1.875e m;
}.top - bar - section {
margin - top: 0; - webkit - transition: none; - moz - transition: none; - o - transition: none;
transition: none;
left: 0!important;
}.top - bar - section ul {
width: auto;height: auto!important;display: inline;
}.top - bar - section ul li {
float: left;
}.top - bar - section ul li.js - generated {
display: none;
}.top - bar - section li a: not(.button) {
line - height: 100 px;
padding: 0 15 px;
}.top - bar - section li a: not(.button).hover {
background: white;
}.top - bar - section.has - dropdown > a {
padding - right: 15 px!important; - webkit - transition: none; - moz - transition: none; - o - transition: none;
transition: none;
}.top - bar - section.has - dropdown > a: after {
content: ""!important;
}.top - bar - section.has - dropdown.moved {
position: relative;
}.top - bar - section.has - dropdown.moved > .dropdown {
visibility: hidden;
}.top - bar - section.has - dropdown.hover > .dropdown,
.top - bar - section.has - dropdown.not - click: hover > .dropdown {
visibility: visible;
}.top - bar - section.has - dropdown.dropdown li.has - dropdown > a: after {
border: none;content: "";margin - top: -16 px;right: 5 px;
}.top - bar - section li.dropdown {
left: 0;background: transparent;min - width: 210 px;
}.top - bar - section.dropdown li a {
color: #222;line-height:2.3;padding:7px 15px;-webkit-transition:background-color 0.5s ease,color 0.5s ease;-moz-transition:background-color 0.5s ease,color 0.5s ease;-o-transition:background-color 0.5s ease,color 0.5s ease;transition:background-color 0.5s ease,color 0.5s ease;}.top-bar-section .dropdown li{background-color:# ddd;
}.top - bar - section.dropdown li label {
white - space: nowrap;
background: #1e1e1e;}.top-bar-section li.empty-megamenu{height:37px;background-color:# ddd;
}.top - bar - section li: not(.megamenu).dropdown li.dropdown {
left: 100 % ;top: 0;
}.top - bar - section > ul > .divider,
.top - bar - section > ul > [role = "separator"] {
border - bottom: none;
border - top: none;
border - right: solid 1 px# fff;
border - left: solid 1 px# fff;
clear: none;
height: 45 px;
width: 0 px;
}.top - bar - section.has - form {
background: #111111;padding:0 15px;height:45px;}.top-bar-section ul.right li:not(.megamenu) .dropdown{right:auto;left:0;}.top-bar-section ul.right li .dropdown li .dropdown{left:100%;}.top-bar-section li.megamenu{width:auto!important;}.top-bar-section li.megamenu>.dropdown{left:auto!important;}.top-bar-section>ul>li.megamenu>.dropdown>li.has-dropdown>a{position:relative;display:inline-block;top:0;margin:0;max-width:150px;}.top-bar-section>ul>li.megamenu>.dropdown{position:absolute;}.top-bar-section>ul>li.megamenu>.dropdown>li.has-dropdown:first-child>.dropdown>li:last-child{border-bottom-left-radius:3px;}.top-bar-section>ul>li.megamenu>.dropdown>li.has-dropdown:last-child>.dropdown>li:last-child{border-bottom-right-radius:3px;}.top-bar-section>ul>li.megamenu>.dropdown>li>.dropdown>li a{padding-top:4px!important;padding-bottom:4px!important;height:37px;}.top-bar-section>ul>li.megamenu .dropdown a{padding-left:17px;}.top-bar-section>ul>li.megamenu>.dropdown>li{padding-top:3px!important;}.top-bar-section>ul>li.megamenu>.dropdown>li>a{font-weight:bold;text-transform:uppercase;letter-spacing:1px;font-size:12px;padding-bottom:25px!important;}.top-bar-section>ul>li.megamenu>.dropdown>li>.dropdown>li:last-child{height:50px!important;}.top-bar-section>ul>li.megamenu:hover>.dropdown>li.has-dropdown{visibility:visible;opacity:1;}.top-bar-section>ul>li.megamenu>.dropdown>li.has-dropdown>a{max-width:100%!important;display:inline-block;float:left;margin:0!important;color:# 222;
}.top - bar - section > ul > li.megamenu > .dropdown > li.has - dropdown > .dropdown {
left: 0!important;top: 45 px;
}.top - bar - section > ul > li.megamenu: hover > .dropdown > li.has - dropdown > .dropdown {
visibility: visible;opacity: 1;
}.no - js.top - bar - section ul li: hover > a {
background: #090909;color:white;}.no-js .top-bar-section ul li:active>a{background:# 090909;color: white;
}.no - js.top - bar - section.has - dropdown: hover > .dropdown {
visibility: visible;
}
}
@media only screen and(min - width: 1200 px) {.top - bar - section > ul > li.megamenu > .dropdown > li.has - dropdown, .top - bar - section > ul > li.megamenu > .dropdown > li.has - dropdown > .dropdown {
width: 295 px;
}.top - bar - section li.empty - megamenu {
height: 41 px;
}.top - bar - section > ul > li.megamenu > .dropdown > li > .dropdown > li: not(: last - child): not(: first - child) a {
padding - top: 6 px!important;
padding - bottom: 6 px!important;
height: 41 px;
}.top - bar - section > ul > li.megamenu.dropdown a {
padding - left: 30 px!important;
}.top - bar - section > ul > li.megamenu > .dropdown > li {
padding - top: 10 px!important;
padding - bottom: 5 px!important;
}.top - bar - section > ul > li.megamenu > .dropdown > li > a {
padding - bottom: 10 px!important;
}.top - bar - section > ul > li.megamenu > .dropdown > li > .dropdown > li: last - child {
height: 55 px!important;
}.top - bar - section > ul > li.megamenu > .dropdown > li.has - dropdown > .dropdown {
top: 55 px!important;
}
}
@media only screen and(min - width: 1300 px) {.inner - wrap > .box - layout {
max - width: 1200 px!important;
}.box - layout# header - wrapper, .box - layout.small - nav {
max - width: 1200 px!important;
}
}
a.hoverNone: hover {
background: none!important;color: #222!important;}
同样，这些不是我的代码，它们来自在线＆＃34;插件＆＃34;在jQueryScript.net