Jon 0

Hi all,

I'm having some CSS troubles with a navigation bar that displays two levels of nav options for the user. The first level contains all the main nav items for the site, and the second level displays all the secondary nav items within that first selected category.

The problem I'm having stems from the seemingly semantic markup I've used to generate these nav lists: A <ul> with a nested <ul> inside each each list item.

In order to get the second <ul> to display in a row beneath the top-level items, I've applied absolute positioning and used z-index to hide all but the relevant nav options for a given page. This results in a layout that works on the surface, but as soon as the user increases the browser's text size, the search box and eventually the whole top row disappear underneath the absolutely-positioned row. Additionally, the <div> that wraps this entire thing does not flex with the layout as well.

Here is a model of the nav in action:

Does anyone have any advice on how I can accommodate for a few levels of text-scaling, keep all the elements accessible, and implement a flexible wrapper with this layout?

Thanks a TON in advance... I have been banging my head against this problem for so long!

4 answers


You should consider defining all your widths and heights in ems instead of pixels. When the user scales his/her text, the layout will scale appropriately.

For example, if your standard text size is 12px:

body {
    font-size: 75%; /* 75% of 16px equals 12px */

#wrapper {
    width: 82.5em; /* 82.5 times 12px is 990px */
    height: 8.25em; /* 8.25 times 12px is 99px */

and so on... As a general rule, always specify your sizes in ems if you want the page to scale when the text is resized. The actual use of ems is becoming debatable as all modern browsers are now using page zooming, eliminating the need to test for text scaling.

Here are some more ressources:

I hope that helps.

Answered about 8 years ago by Mads Kjaer

To add to mads, I'd suggest setting your body font size to something easier to calculate.

body { font-size: 62.5%; }

This basically sets your base font size to 10px units, therefore you won't have to use decimal points for your high level widths, heights and font sizes. Obviously, at some point you will want to fine tune something to be other than a multiple of 10. So, if you want to set a child of the body to a font size of 12px, simply do:

p.something { font-size: 1.2em; }

I love this method as it makes my classes seem more like a simple sentence when I am scanning through my CSS.

Answered about 8 years ago by Guy Meyer

@Jans Hedqvist Looking at the question I'd say he is outputting just the navigation from the active/current page.

Using z-index as a solution for sub-navigation is one I definitely haven't seen before. There are a variety of different (and better) solutions.

You could look into using code for dropdown menus, and style them in a way to appear as a sub-navigation level. Alistapart has a great article on dropdown menus called Suckerfish Dropdowns

Dann Webb has since rewritten the Suckerfish dropdowns to be even lighter in code. He named them Sons of Suckerfish.

It requires a little knowledge of css to style them the way you want too, but I'd say that's a fun little project.

Answered about 8 years ago by Jesse Vlasveld

I'd say Mads is right, try to use relative units like em. But you could also consider not printing out all the subnavs for the navigation all at once. Just the subnave of the current / active page / nav.

That many links kan be a problem both to search engines and people viewing your page with a screen reader (alltough that can be somewhat compensated with a "skip nav" link).

Answered about 8 years ago by Jens Hedqvist