[Solved] Problem with pure CSS dropdown menu

[codeaholic]

I’m using the pure CSS dropdown menu here. http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

The issue I’m having is that once you get down to
nav ul ul ul li a {
margin: auto;
padding: 8px 35px;
}

The menu item is concatenating anything over about 10 characters and putting on two lines. I can’t seem to solve the issue. The examples uses very short menu descriptions at that level so you don’t see the problem in the demo. However, if you use that code and instead of HTML or CSS, you use something like Acceptable Use policy, it won’t work. The code I added above was to try and fix the demo. It does make the menu at that level wider but the text is still split.

Any ideas how I can fix this?

[Beverleyh]

The tutorial isn’t loading at the moment but you could try setting a min-width?

[Paulie_D]

Any ideas how I can fix this?

If you show us where you are in a Codepen.io demo we may be able to help.

[Paulie_D]

Unfortunately, that means having to delve around with developer tools.

A reduced case demo in Codepen.io us much more useful.

[Author]

Posts