css layout with html5

index4.html and css/style4.css

OK, it's time to build our navigation menu. Since menu building can get a bit tedious, some people prefer to use a menu "system" rather than build from scratch - there are dozens of free/open source menu building options available out there. The basis of the technique used here is outlined in the Lists as Menus section of our CSS 101 tutorial - you might want to have a look at that before returning here.

Essentially, the idea is that we're using a series of nested unordered lists, where the top-level list items are our top-level navigation items, and the lists nested under those represent the contents of the drop-down menus. We use CSS syntax we've already covered to define the look and feel of the menu items in each of their states:

Notice that the nested ul is completely contained within a list item! Start by pasting a set of nested lists into your nav element:

And replace the the "nav" rule in your stylesheet with the following:

This CSS is going to look more complex than what you're used to working with so far, but if you take your time and think about each line, it's not hard to figure out what it's doing. Notice that we've added CSS comments to some sections as a reminder to our future selves - when we return to this to make changes in two years time, we shouldn't have to figure out the non-obvious stuff all over again.

It's time to let go of the green placeholder color we gave to the nav element - you now want it to match the background color of our menu so everything is seamless. So, change that now:

Your navigation should now look pretty much perfect!