我在Umbraco 7上运行一个响应站点。在移动设备上查看时，主菜单从桌面站点的下拉菜单变为手风琴样式菜单。我有一个JavaScript脚本在运行，因此当您触摸菜单项旁边的箭头时，会出现子菜单。但是，子菜单不会出现在菜单项和下一个菜单项之间，而是将菜单整体展开，而是覆盖了主菜单并且是半透明的，因此您可以看到其后的菜单。
脚本正在将属性display: block; visibility: visible; and opacity: 1;添加到包含子菜单的<ul>元素中，并且<li>元素也具有display: block;。
有人可以建议为什么会这样吗？
在移动网站上呈现的HTML：
<ul>
<li class="current">
<a href="/">Home</a>
<span id="mainMenuIcon" class="fa fa-bars menuIcon"></span>
</li>
<li class="mainMenuItem">
<a href="/about-us/">About us</a>
<span id="1259" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li><a href="/about-us/our-people/">Our People</a></li>
<li><a href="/about-us/who-we-were-and-are/">Who we were and are</a></li>
<li><a href="/about-us/our-houses/">Our Houses</a></li>
<li><a href="/about-us/annual-reports/">Annual Reports</a></li>
</ul>
</li>
<li class="mainMenuItem">
<a href="/being-a-tenant/">Being a Tenant</a>
<span id="1293" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li><a href="/being-a-tenant/asbestos/">Asbestos</a></li>
<li><a href="/being-a-tenant/being-safe-secure/">Being Safe & Secure</a></li>
</ul>
</li>
<li class="mainMenuItem">
<a href="/news/">News</a>
<span id="1305" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li><a href="/news/community-garden/">Community Garden</a></li>
<li><a href="/news/football-team/">Football Team</a></li>
<li><a href="/news/health-centre/">Health Centre</a></li>
<li><a href="/news/another-news-item/">Another News Item</a></li>
<li><a href="/news/one-more-news-item/">One more news item</a></li>
<li><a href="/news/a-further-news-item/">A further news item</a></li>
<li><a href="/news/yet-more-news/">Yet more news</a></li>
<li><a href="/news/news-news-news/">News, news, news</a></li>
<li><a href="/news/how-much-more-news-is-there/">How much more news is there?</a></li>
<li><a href="/news/the-final-news-item/">The final news item?</a></li>
<li><a href="/news/the-final-news-item/">The final news item?</a></li>
</ul>
</li>
<li class="mainMenuItem">
<a href="/contact-us/">Contact Us</a>
</li>
<li class="mainMenuItem">
<a href="/location/">Location</a>
</li>
</ul>
主要样式表中的CSS指向导航：
nav {
width: 100%;
height: auto;
background-color: var(--darkest-color);
}
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px;
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
nav ul li a {
color: var(--lightest-color);
margin-left: auto;
margin-right: auto;
}
nav ul li a:hover {
font-style: italic;
}
nav ul ul {
display: block;
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: 200px;
transition: visibility 0s, opacity 0.3s ease;
}
nav ul li:hover {
border-bottom: 2px solid var(--lightest-color);
background-color: var(--site-grey);
}
nav ul li:hover > ul {
visibility: visible;
opacity: 1;
margin-top: 2px;
}
nav ul li ul li {
display: block;
float: none;
padding: 20px 3px;
background-color: var(--site-grey);
border-bottom: 2px solid var(--lightest-color);
}
nav ul li ul li a {
color: var(--lightest-color);
}
nav li.current {
background-color: var(--site-grey);
border-bottom: 2px solid var(--lightest-color);
}
nav li.current > a {
color: var(--lightest-color);
font-style: italic;
}
响应式样式表中的CSS，可更改移动网站的上述内容：
nav > ul > li {
float: none;
margin: 0px;
padding-top: 15px;
}
nav > br {
display: none;
}
nav ul ul {
position: relative;
top: 15px;
width: 100%;
z-index: 0;
}
nav > ul > li {
padding: 15px 0 13px 0;
}
nav ul li:hover {
border-bottom: none;
background-color: inherit;
}
nav ul li:hover > ul {
visibility: hidden;
}
nav li.current {
background-color: inherit;
border-bottom: none;
}
.mainMenuItem {
display: none;
}
.menuIcon {
display: inline;
position: relative;
top: -5px;
z-index: 1;
float: right;
margin: 0;
padding: 0px;
height: 0px;
width; 0px;
}
在主菜单项上单击箭头时显示子菜单的Javascript：
function activateSubMenuIcon(elementId) {
var x = document.createElement("SCRIPT");
var t = document.createTextNode("document.getElementById("
+ elementId
+").onclick = function() {"
+ "if (document.getElementById("
+ elementId
+ ").className === 'fa fa-caret-down menuIcon subMenuOpener') {"
+ "document.getElementById("
+ elementId
+ ").className = 'fa fa-caret-up menuIcon subMenuOpener';"
+ "document.getElementById("
+ elementId
+ ").nextElementSibling.setAttribute('style','display: block !important; opacity: 1 !important; visibility: visible !important;');"
+ "} else {"
+ "document.getElementById("
+ elementId
+ ").className = 'fa fa-caret-down menuIcon subMenuOpener';"
+ "document.getElementById("
+ elementId
+ ").nextElementSibling.style.display = 'none';}}");
x.appendChild(t);
document.body.appendChild(x);
}
var subMenuOpeners = document.getElementsByClassName("subMenuOpener");
var numberOfSubMenuOpeners = subMenuOpeners.length;
for ( i=0 ; i < numberOfSubMenuOpeners ; i++ ) {
var spanId = document.getElementsByClassName("subMenuOpener")[i].id;
activateSubMenuIcon(spanId);
}