1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Submenu Item in Dropmenu Menu (Mobile)

Discussion in 'CSS' started by serialentre, Mar 5, 2015.

  1. #1
    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!
    SEMrush
     
    serialentre, Mar 5, 2015 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #2
    overflow:hidden the parent LI it's positioned off of, not the UL. Doing it on the UL shouldn't be doing jack.
     
    deathshadow, Mar 6, 2015 IP
  3. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #3
    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.
     
    serialentre, Mar 6, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #4
    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 ****.
     
    deathshadow, Mar 7, 2015 IP