Javascript 手风琴菜单子菜单覆盖菜单而不是展开菜单
我在Umbraco 7上运行了一个响应站点。在移动设备上查看时，主菜单将从桌面站点上的下拉版本更改为手风琴式菜单。我有一个javascript脚本，当你触摸菜单项旁边的箭头时，子菜单就会出现。但是，子菜单不是出现在菜单项和下一个菜单项之间，而是作为一个整体展开菜单，它覆盖在主菜单上，是半透明的，因此您可以看到它后面的菜单 脚本正在添加属性，Javascript 手风琴菜单子菜单覆盖菜单而不是展开菜单,javascript,css,menu,umbraco7,Javascript,Css,Menu,Umbraco7,我在Umbraco 7上运行了一个响应站点。在移动设备上查看时，主菜单将从桌面站点上的下拉版本更改为手风琴式菜单。我有一个javascript脚本，当你触摸菜单项旁边的箭头时，子菜单就会出现。但是，子菜单不是出现在菜单项和下一个菜单项之间，而是作为一个整体展开菜单，它覆盖在主菜单上，是半透明的，因此您可以看到它后面的菜单 脚本正在添加属性，display:block；能见度：可见；不透明度：1到包含子菜单的元素，并且元素具有显示：块也是 有人能解释为什么会发生这种情况吗 编辑： 在移动站点上呈现
display:block；能见度：可见；不透明度：1
显示：块也是
有人能解释为什么会发生这种情况吗
编辑：
在移动站点上呈现的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>
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;
}
响应样式表中的CSS更改了移动站点的上述内容：
<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>
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);
}
函数activateSubMenuIcon（elementId）{
var x=document.createElement（“脚本”）；
var t=document.createTextNode（“document.getElementById（”
+元素ID
+“”。onclick=function（）{”
+“如果（document.getElementById（”
+元素ID
+“”.className==='fa-fa插入符号向下菜单子菜单开启器'）{”
+“document.getElementById（”
+元素ID
+）类名称='fa-fa-caret-up-menuIcon子菜单开启器'
+“document.getElementById（”
+元素ID
+“”.nextElementSibling.setAttribute（'style'，'display:block！important；opacity:1！important；visibility:visible！important；'）；”
+“}否则{”
+“document.getElementById（”
+元素ID
+）类名称='fa-fa-caret-down-menuIcon子菜单开启器'
+“document.getElementById（”
+元素ID
+）。nextElementSibling.style.display='none'；}}）；
x、 儿童（t）；
文件.正文.附件（x）；
}
var submonopeners=document.getElementsByClassName（“submonopener”）；
var numberofsubmonopeners=submonopeners.length；
对于（i=0；i
自从发布后，我添加了！对
属性很重要，但它没有帮助。您有正在使用的HTML和CSS吗？