The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #202122

    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 @ .


    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.