导航菜单切换下拉列表无法正确呈现

Question

我很难在我的网站上正确呈现下拉菜单www.bg-hairsalon.com这是一个利用主题Zerif-Lite的wordpress网站。单击导航按钮时，它不显示选项。但是，如果我向下滚动然后单击导航切换按钮，它将显示菜单。我正在使用android和iphone来测试我的网站。如果你可以看一看会很棒。我用android来测试这个菜单。这对iphone也不起作用。

到目前为止，我用于导航菜单的代码如下： 不确定我需要多少代码。

@media screen and (max-width: 480px){
.navbar {
background: #FFF;
border: 0;
border-radius: 0 !important;
text-align: left;
-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
}

@media screen and (max-width: 480px){
#main-nav {
position: fixed;
width: 100%;
z-index: 1000;
min-height: 75px;
}
}

@media screen and (max-width: 480px){
#main-nav.fixed {
position: fixed;
top: 0;
}
}

.nav li a.nav-active {
color: #b8db4d !important;
}
.nav li a.nav-active:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #b8db4d;
bottom: 0px;
left: 12.5%;
}
.navbar-inverse .navbar-nav >li {
display: inline;
margin-right: 20px;
margin-top: 20px;
}
.navbar-inverse .navbar-nav>li:last-child {
margin-right: 0 !important;
}
.navbar-inverse .navbar-nav>li>a {
color: #404040;
padding: 0;
line-height: 35px;
}
.navbar-inverse .main-navigation ul > li {
display: inline;
margin-right: 20px;
margin-top: 20px;
}
.navbar-inverse .main-navigation > ul > li:last-child {
margin-right: 0 !important;
}
.navbar-inverse .main-navigation > ul > li > a {
color: #404040;
padding: 0;
line-height: 35px;
}
.navbar-inverse .navbar-nav ul.sub-menu {
display: none;
position: absolute; top: 100%;
background:#fff;
width:200px;
box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
}
.navbar-inverse .navbar-nav ul.sub-menu {
margin:0;
}
.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu{
position: absolute;
left:100%;
top:0;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
float: none;
position: relative;
list-style:none;
padding:10px;
}
.navbar-inverse .navbar-nav ul.sub-menu li a {
color:#404040;
}
.navbar-inverse .navbar-nav ul.sub-menu li:hover > a {
color:#b8db4d;
}
.navbar-inverse .navbar-nav li:hover > ul.sub-menu {
display: block;
}

.navbar-brand {
height: 76px;
position: relative;
line-height: 45px;
}
.current a {
color: #b8db4d !important;
position: relative;
outline: none;
}
.current:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #b8db4d;
bottom: 0px;
left: 12.5%;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #b8db4d;
outline: none;
}

@media screen and (max-width: 480px){
.navbar-toggle {
border: 0;
background-color: #808080;
margin-top: 23px;
}
}

.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
background-color: #b8db4d;
filter: alpha(opacity=100);
opacity: 1;
box-shadow: none;
}

@media screen and (max-width: 480px){
.navbar-toggle.active{
background-color: #b8db4d !important;
}
}

@media screen and (max-width: 480px){
.navbar-toggle.collapsed{
background-color: #808080 !important;
}
}