Wordpress超级菜单小部件移​​动样式问题与现有模板

Question

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

我遇到的问题是在移动视图中使用模板的顶部导航栏和嵌套菜单。当用户向下滚动页面时，导航栏应该缩小。菜单和导航栏在1024px宽度以上的桌面屏幕尺寸上一起工作。但是，当视口缩小时，移动菜单会触发并替换我遇到问题时的全宽菜单。

当页面位于顶部且完整标题生效时，移动菜单效果很好。但是，当您向下滚动并且最小标题进入播放时，移动菜单会向上移动并覆盖开/关切换，以便用户无法打开和关闭菜单 - 除非它们一直向上滚动，并且菜单出现在切换点下方（这就是我想要的）。我一直在使用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;
}