I want to create a full-width dropdown mega menu that I can also combine with a top bar that has an drilldown menu in mobile screens. So far, (with the help from this thread: http://foundation.zurb.com/forum/posts/36800-f6-and-mega-menus) I have been able to create the dropdown mega menu and on small screens, the title bar appears and toggles open. However, when I try to open an item with a drilldown submenu, it still treats it as though it is a dropdown item.
Also, I am noticing that full-width hover for the submenus are somehow pushing the screen to a lot of extra empty space horizontally. While I can get rid of the extra empty horizontal space by adding a max-width:100% to the dropdown-pane class, the second of my two mega submenus doesn't display full-width correctly when I hover over them. Although in the codepen, they show just fine.
This is the link to the codepen: http://codepen.io/jen188/pen/PzRkbg