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.

Dropdown Menu Item Disappears when mouse over

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

  1. #1
    Hi all,

    I have a Dropdown menu Wwhen i hover over the main list item, the dropdown appears, but when I mouse over sub items, it disappears.

    My dropdown ul element has position:absolute and top:2em (thereabouts). and when I change top to 1.5em or so, it solves the problem. However, the submenu items has a jagged effect, as opposed to smooth navigation, upon hover.
    SEMrush
    For the jagged effect, I added in padding for the ul ul li items and it solved it. Not sure why padding solved it though.

    But how do I solve the problem of the dropdown menu not remaining when I have top:2em or higher?

    #mainMenu ul li {
        position: relative;
        display: inline;
        float: left;
        padding-right: 20px;
        font-size: 1.2em;
        zoom:1;
        overflow: hidden;
    }
    
    #mainMenu ul li:hover {
        overflow: visible;
    }
    
    #mainMenu ul ul{
        position: absolute;
        top: 1.3em;
        left: 50%;
        width: 10em;
        margin-left: -3em;
        height: auto;
        border: solid #CCC;
        border-width: 0 1px 1px;
    }
    
    Code (markup):

    Any idea what the cause of the problem is and how do I deal with it?

    http://startups.maxnathaniel.com/

    Many thanks.

    P.S. I'm fixing the desktop version. Mobile version may look hideous.
     
    Solved! View solution.
    Last edited: Mar 3, 2015
    serialentre, Mar 3, 2015 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,375
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #2
    Did you get it fixed on your own as I'm not seeing the issue, or is the problem browser specific?

    Though you aren't stating your line-height when you change the font-size, so christmas knows how tall things will end up in different browsers. Likewise that PX side padding with EM positioning of the child places the dropdown all over the place at different font sizes -- try to be consistent on that.
     
    deathshadow, Mar 4, 2015 IP
  3. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #3
    Yup I fixed it by 1. Fixing line-height of li to 2em, and 2. Set top to 2em.

    Which line-height should I be stating? Is it the UL or LI item? Should I also be stating a height for UL or LI item?

    Yup I cleaned up my codes. Changed all the px to em.

    Thank you!
     
    serialentre, Mar 4, 2015 IP
  4. #4
    Good rule of thumb is that EVERY time you say font-size, say line-height. You CANNOT trust it to inherit properly otherwise cross browser. SOME people make the wild claim that you can omit the metric thus:
    line-height:2;

    ...and it will inherit properly; that's utter and complete BS the moment the browser default font size changes. Laughably the people defending that will stick their heads in the sand every single time you show them screen caps as proof that said approach is broken with instructions on how to do it, then wonder why you get pissed off at them wondering if they are just being deliberately obtuse about it.

    Since saying something like "font-size:1.3em; line-height:2em;" is 33 bytes anyways, I just go ahead and use the full condensed font property.

    font:normal 1.3em/2em arial,helvetica,sans-serif;

    Since it's damned near the same number of characters (13 more in this case), makes it easier to play with if you want to add bold or italic, and makes it perfectly clear what's being used on everything inside said element. Of course if you were changing font-weight or style as well, the condensed is most always smaller than declaring all of them separately. (that's why it exists) -- and naturally if you are changing font-size and family so often that the condensed property becomes a "chore" to maintain, you probably have an inconsistent hard to follow layout that looks slapped together any old way.
     
    deathshadow, Mar 4, 2015 IP
  5. serialentre

    serialentre Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    30
    #5
    Ah okay, thank you for pointing that out! Learnt something new again :)
     
    serialentre, Mar 5, 2015 IP