#013: CSSing the Navigation Structure

(Updated on )

We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page.

The navigation blocks, at the widest width, are 1/8 the width of nav parent. We set them to inline-block so they will accept that width. We end up having to set the width to 12.49% rather than 12.5% because of subpixel rounding errors.

We figure out a way to get the bottom shadow of the navigation going, but are worried a bit about the technique used. We need to reverse the z-index of each of the menu items so that the first elements is “on top” and step down one by one rather than the last one. We use a series of :nth-child selectors to do this.