How can I push sub-nav ul out of main-nav ul? - html

Question

I have a CMS-generated main-nav menu with one sub-menu. Both menus are standard ul tags with a class of “navCMSListMenuUL” which is then styled in my CSS accordingly. The issue is that on a:hover, the container expands to accommodate the newly displayed sub-nav ul.
I would like for the sub-nav to go outside of the container and flow at a higher z-index than any elements beneath the container. There are a couple of other things that I would like to clean up in this nav, but those are ancillary to the sub-nav flow. I have created a reduced test-case in 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;
}

Answer 1

OK, you when doing menu-like code, you are going to have styles that override each other (multiple nested UL, LI and A).
It's good practice to include the ">" element in your style sheets, which limits the scope of your query to direct children.
I have edited your code a bit, mainly by introducing that direct child rule (>). I also made the sub menu absolute positioned to it's parent, meaning you will not have the sub menu push your main menu to grow large.
Here is your code pen.
And the code:
/* #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;
}