javascript - 现有模板的 Wordpress 大型菜单小部件移​​动样式问题

Question

这是我的网站 - http://pl.bodwell.edu .它是一个运行自定义模板 (http://sketchthemes.com/samples/invert-business-demo/) 和名为 Max Mega 菜单的小部件 (http://www.maxmegamenu.com/) 的 Wordpress 站点。

我遇到的问题是在移动 View 中使用模板的顶部导航栏和嵌套菜单。当用户向下滚动页面时，导航栏应该会缩小。菜单和导航栏在桌面屏幕尺寸大于 1024 像素宽度时可以很好地协同工作。但是，当视口(viewport)缩小到低于该值时，移动菜单会触发并替换全宽菜单，这就是我遇到问题的时候。

当页面位于顶部且完整标题有效时，移动菜单效果很好。但是，当您向下滚动并且最小标题开始播放时，移动菜单会向上移动并覆盖开/关切换，因此用户无法打开和关闭菜单 - 除非他们一直向上滚动并出现菜单在开关下方(这是我想要的)。我一直在使用 Firebug 来查看正确的 CSS 选择器是什么，这样我就可以强行将菜单向下移动，但我终究无法弄清楚。我不确定它是否与负责在向下滚动页面时最小化顶部标题的模板 javascript 有关。

所以我不知道这是一个纯粹的 CSS 问题，一个 JS 问题，还是两者兼而有之。

这是我的 CSS，因为它与菜单样式有关。

#header.skehead-headernav-shrink { height: 60px; }
#skenav {background:none repeat scroll 0 0 transparent;  display:block;  margin-left:auto;  margin-  
right:auto;  border:medium none;  } 
#skenav .ske-menu, ul.menu {  font-size: 13px;  margin: 0px;  display:inline-block;  width:auto;  
float:right;  }
#skenav .ske-menu ul.menu {  list-style: none;  margin: 0;  }
#skenav .ske-menu .menu li, ul.menu li {  float: left;  position: relative;  margin-left: 0px;  
list-style: none outside none;  }
#skenav a {color: #333333;display: block;font-size: 13px; text-transform:uppercase; line-height: 
85px; padding: 0 22px;text-decoration: none;
transition: color 0.1s linear 0s, background 0.1s linear 0s;    -webkit-transition: color 0.1s 
linear 0s, background 0.1s linear 0s;   -moz-transition: color 0.1s linear 0s, background 0.1s 
linear 0s;      -o-transition: color 0.1s linear 0s, background 0.1s linear 0s;  }
#skenav ul ul {  position: absolute;  top: 100%;  left: 0px;  float: left;  width: 200px;  z-index: 
99999;  }
#skenav ul .sub-menu li ,#skenav ul ul li {  display: block; width:100%;  }
#skenav ul .children li:first-child,  #skenav ul .sub-menu li:first-child {  border-top: none;  }
#skenav ul ul li{  border-top: 1px solid rgba(0,0,0,.15);  }
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{  left: 100%;  top: 0px !important; border-top: 0 none;margin-top:0;  }
#skenav ul ul a {  line-height: 1.2em;  font-size: 13px;  padding: 10px 20px;  width: auto;  height: auto;  color: #FFFFFF;  }
#header.skehead-headernav-shrink #skenav ul ul a {  line-height: 1.2em;  }
#skenav ul li:hover{  z-index:999999999999;  }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {  color: #fff;  }

如果有人愿意查看我的网站并帮助我，我将不胜感激。

Answer 1

#header.skehead-headernav-shrink {
    height: 60px;
}
#skenav {
    background:none repeat scroll 0 0 transparent;
    display:block;
    margin-left:auto;
    margin- right:auto;
    border:medium none;
}
#skenav .ske-menu, ul.menu {
    font-size: 13px;
    margin: 0px;
    display:inline-block;
    width:auto;
    float:right;
}
#skenav .ske-menu ul.menu {
    list-style: none;
    margin: 0;
}
#skenav .ske-menu .menu li, ul.menu li {
    float: left;
    position: relative;
    margin-left: 0px;
    list-style: none outside none;
}
#skenav a {
    color: #333333;
    display: block;
    font-size: 13px;
    text-transform:uppercase;
    line-height: 85px;
    padding: 0 22px;
    text-decoration: none;
    transition: color 0.1s linear 0s, background 0.1s linear 0s;
    -webkit-transition: color 0.1s linear 0s, background 0.1s linear 0s;
    -moz-transition: color 0.1s linear 0s, background 0.1s linear 0s;
    -o-transition: color 0.1s linear 0s, background 0.1s linear 0s;
}
#skenav ul ul {
    position: absolute;
    top: 100%;
    left: 0px;
    float: left;
    width: 200px;
    z-index: 99999;
}
#skenav ul .sub-menu li, #skenav ul ul li {
    display: block;
    width:100%;
}
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child {
    border-top: none;
}
#skenav ul ul li {
    border-top: 1px solid rgba(0, 0, 0, .15);
}
#skenav ul ul ul.sub-menu, #skenav ul ul ul.children {
    left: 100%;
    top: 0px !important;
    border-top: 0 none;
    margin-top:0;
}
#skenav ul ul a {
    line-height: 1.2em;
    font-size: 13px;
    padding: 10px 20px;
    width: auto;
    height: auto;
    color: #FFFFFF;
}
#header.skehead-headernav-shrink #skenav ul ul a {
    line-height: 1.2em;
}
#skenav ul li:hover {
    z-index:999999999999;
}
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {
    color: #fff;
}