Grow your CSS skills. Land your dream job.

[Solved] FireFox problem: nested menu not relative to parent li

  • # September 21, 2013 at 9:53 am

    This is FF issue, (it looks fine on safari and chrome) The nested menu shows up all the way on the left and not right under the selected item…

    http://codepen.io/hrazith/pen/xumrd

    please help…thanks!

    # September 21, 2013 at 10:03 am

    I dislike all those deep selectors (nav ul li ul li a)…I just give each menu level itsown classand it makes things much clearer.

    Here’s a reference version I keep around.

    Hope it’s useful: http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

    EDIT:

    Try adding left:0; to the submenu css.

    # September 21, 2013 at 10:12 am

    Thanks Buddy, does look simpler..

    # September 21, 2013 at 10:15 am

    ahh…that actually worked!
    left:0;

    Updated Pen:

    http://codepen.io/hrazith/pen/xumrd

    PS: how do I mark this thing ‘solved’?

    # September 21, 2013 at 3:17 pm

    You should not be giving width to your dropdown ul like this:

    nav ul ul { 
      width: 240px; <--replace 240px with width:auto or you can remove it completely  
    }
    

    Let that width of dropdown grow on it’s own according to anchor content width with this:

    nav ul ul li a {
      padding:8px;
      white-space:nowrap;
    }
    
    # September 21, 2013 at 6:52 pm

    i like it!…

    Thanks

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".