Grow your CSS skills. Land your dream job.

Two tier drop down navigation

  • # March 26, 2013 at 7:28 am

    Soo two tier drop downs on navigations are a headache. I have one, and it works, for the most part, but there is something niggly and annoying that I can’t fix.

    [Here is what I have made](http://codepen.io/alexmccabe/pen/ncsHL “CodePen”)

    So looking at that link you can see that the navigation has a two tier drop down. The issue I am having lies with the second second set of dropdown links.

    With the first set, the width is auto, so will grow wider when text gets longer. However, with the second set, that is as wide as it gets without explicitly stating a width. I do not want to do that.

    I hope I have managed to explain myself well enough…

    # March 26, 2013 at 7:38 am

    There something funky in the

    ul.layer_2 ul {
    margin: -29px 96.5% 0 ;
    }

    statement.

    Rather than play with margins try using positioning.

    Here’s a 3 level one I keep around you might be able to use:http://codepen.io/Paulie-D/pen/BbjFa

    # March 26, 2013 at 8:20 am

    Thanks Paulie_D, I really couldn’t figure it out and it was annoying me to no end…

    # March 27, 2013 at 12:22 pm

    Looking at the code, I notice you declare an explicit width of 20%. I am trying to avoid declaring any specific widths. I am wondering why the 2nd drop down menu doesn’t take the width of the text. If I set the width of the <ul> to 100% but then it’s the width of it’s parent…

    It just seems really odd to me that the first nested <ul> is fine, but nest another one and it’s quirks galore.

    # March 27, 2013 at 1:15 pm

    You don’t have to specify a width for the li (after all it’s just a number) but if you don’t then you will have to add some horizontal padding (probably to the anchors).

    Remember this is an inline-block menu…there are no floats so, perhaps, it’s no going to work exactly the way you expect.

    For me, I prefer menu items that are the same width. If I had a requirement for `width: auto` or something, I might structure it differently.

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

You must be logged in to reply to this topic.

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