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

[taylorp0994]

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 .

[Paulie_D]

You need to use absolute positioning to take the submenu out of the document flow.

I’ve removed the display:none for the time being. so you can see it appearing. Note: the parent li need to have position:relative.

After that it’s a matter of adjusting the styling on the submenu and it’s children.

http://codepen.io/Paulie-D/pen/ZGWKyx

[Author]

Posts