The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // 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…

    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:


    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!

    Updated Pen:

    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 {
    # September 21, 2013 at 6:52 pm

    i like it!…


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed