我有一个带有一个子菜单的CMS生成的主-NAV菜单。两种菜单都是标准UL标签,带有一类" NavCmslistMenuul",然后在我的CSS中进行样式。问题是:在A:悬停,容器扩展以适应新显示的子NAV UL。
我希望子-NAV与容器下面的任何元素相比,以更高的z索引流到容器外面。我还想在此NAV中清理其他几件事,但是这些内容是亚NAV流的辅助。我在codepen @ http://codepen.io/patrickthewizard/pen/zgwkyx中创建了一个减少的测试案例。
<nav class="navigation">
<ul id="menuElem" class="navCMSListMenuUL">
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">Home</a>
</li>
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">About Us</a>
</li>
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">Calendar</a>
</li>
<li class="navCMSListMenuHighlightedLI noseparator">
<a class="navCMSListMenuLinkHighlighted" href="#">Members</a>
<ul class="navCMSListMenuUL">
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">Become a Member</a>
</li>
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">Board Meetings</a>
</li>
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">Committees</a>
</li>
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">Current Members</a>
</li>
<li class="navCMSListMenuLI">
<a class="navCMSListMenuLink" href="#">Member Benefits</a>
</li>
<li class="navCMSListMenuLI noseparator">
<a class="navCMSListMenuLink" href="#">Statistics & Data</a>
</li>
</ul>
</li>
</ul>
/* #01-Header/Nav# */
nav.navigation {
clear: both;
/* background-color: #3c3c3c; */
overflow: visible;
/* padding: 15px; */
/* border-top: 6px solid #2a8cec; */
/* margin-bottom: 30px; */
}
ul#menuElem {
text-align: center;
background-color: #3c3c3c;
border-top: 6px solid #2a8cec;
margin-bottom: 30px;
}
ul#menuElem li {
display: inline-block;
margin: 16px 0 15px 0;
}
ul#menuElem a {
color: #fff;
text-decoration: none;
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
border-right: 1px solid;
margin: 15px 0;
margin-left: -4px;
}
ul#menuElem a:hover {
background-color: #2a8cec;
}
ul#menuElem li ul {
display: none;
width: 100%;
float: left;
}
ul#menuElem li:hover ul {
display: block;
}
ul#menuElem ul li {
display: block;
}
好吧,您在执行类似菜单的代码时,您将具有互相覆盖的样式(多个嵌套UL,LI和A)。
最好将">"元素包含在您的样式表中,这将查询的范围限制为指导孩子。
我已经对您的代码进行了一些编辑,主要是通过介绍直接的子规则(>)。我还将子菜单绝对放置在其父母身上,这意味着您将没有"子"菜单按下主菜单以生长大。
这是您的代码笔。
和代码:
/* #01-Header/Nav# */
nav.navigation {
clear: both;
/* background-color: #3c3c3c; */
overflow: visible;
/* padding: 15px; */
/* border-top: 6px solid #2a8cec; */
/* margin-bottom: 30px; */
}
ul#menuElem {
text-align: center;
background-color: #3c3c3c;
border-top: 6px solid #2a8cec;
margin-bottom: 30px;
}
ul#menuElem > li {
display: inline-block;
position: relative;
margin: 16px 0 15px 0;
}
ul#menuElem > li > a {
color: #fff;
text-decoration: none;
padding: 15px 35px;
font-weight: 600;
text-transform: uppercase;
border-right: 1px solid;
margin: 15px 0;
margin-left: -4px;
}
ul#menuElem > li > a:hover {
background-color: #2a8cec;
}
ul#menuElem > li > ul {
display: none;
width: 100%;
float: left;
}
ul#menuElem > li:hover ul {
display: block;
top: 30px;
right: 0px;
position: absolute;
background: #FFF;
padding: 0px;
margin: 0px;
}
ul#menuElem > li:hover > ul > li{
margin: 0px;
padding: 0px;
list-style: none;
text-align: left;
padding: 5px;
line-height: 30px;
border-bottom: solid 1px #dedede;
}
ul#menuElem > li:hover > ul > li > a{
text-decoration: none;
color: inherit;
}
ul#menuElem > li:hover > ul > li:hover {
background: #000;
color: #FFF;
}
ul#menuElem > ul > li {
display: block;
}