My Content Management System generates a main-nav menu with one sub-menu. Both menus are styled using standard ul tags with a class of “navCMSListMenuUL” and then customized in my CSS. The problem arises when hovering over a link, causing the container to expand to fit the displayed sub-menu.
I am looking to have the sub-menu extend beyond the container and be positioned at a higher z-index than any elements below the container. While there are other improvements I would like to make to this navigation, fixing the sub-menu flow takes priority. I have created a simplified example 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;
overflow: visible;
}
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;
}