Submenu Item in Dropmenu Menu (Mobile)

Hi all,

I have a dropdown menu that is working. I have two levels of menu items. I would like the sub menu item to appear only upon click or hover. It is appearing at the moment, BUT the sub menu LI items overlaps the main LI items.

Currently using overflow:hidden on the main UL element, and overflow:visible on sub menu LI item upon hover.

But I would like the sub menu LI items to push the other main menu item downwards to make space for the sub menu LI items.

   #nav-row #mainMenu ul ul {
        overflow:hidden;
    }
    #nav-row #mainMenu ul ul li:hover {
        overflow: visible;
        position: relative;
        top: 0;
        left: 0;
        margin: 0;
        padding-left: 2em;
        border: 0;
        box-shadow: 0;
        padding-bottom: 4em;
    }

Code (markup):

My site is here: http://startups.maxnathaniel.com/
Appreciate any pointers. Thank you!

 

overflow:hidden the parent LI it's positioned off of, not the UL. Doing it on the UL shouldn't be doing jack.

 

Sorry I meant that hidden: overflow is on the parent element of the sub menu. But because the menu is stacked vertically, the sub menu overlaps with the main menu items when user hovers over the main menu item.

 

Then set left:100%; to push it over. Be warned you MAY have to fix the width of the parent LI when you do that for compatibility with older versions of IE, or at the very least have a haslayout trigger; while overflow:hidden may count as one in IE7/newer, when you set it back to visible legacy IE can do wonky ****.