Two tier drop down navigation

[alexmccabe]

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…

[Paulie_D]

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

[Paulie_D]

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.

[Author]

Posts