Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

308 LESSON 11: Using CSS to Position Elements on the Page


The first step in creating the menu is to lay out the parent list horizontally with appropri-
ate spacing and to hide the nested lists. I’ll also need to make it a positioned element.
As it turns out, not only does the outer list need to be positioned, but it needs to be abso-
lutely positioned. Unfortunately, as you know, absolutely positioning removes an element
from the normal flow. If I position the list that way, it will mess up the normal flow for
the rest of the page.
For this reason I’ll need to add another element to the page that I can position relatively.
So the real first step is to wrap the list in a <nav>, with an ID like this:
<nav id="navigationBar"> ... menu lists ... </nav>
You will learn more about the <nav> tag in Lesson 13, “Structuring a Page with
HTML5.”
Okay, now that’s all set and I can start to style the <nav> and the lists nested in it. I need
to take care of the following things in the style sheet to get the menus working:
n Remove the bullets from the lists
n Lay out the top-level list horizontally
n Specify sizes for all of the lists and list items to assist with positioning
n Position the submenus so that they appear in the correct place
n Hide the submenus by default
n Apply styles to customize the appearance of the menus
n Show the submenus on hover

Let’s look at the styles required to make the menu work, in order of increasing specific-
ity. First, I style the container for my <nav>:
#navigationBar {
position: relative;
margin: 0;
padding: 0;
height: 30px;
width: 90%;
}

These styles position the navigation bar relatively so that I can position absolutely posi-
tioned items relative to it. I also disable the margins and padding and specify a size for
the navigation bar. Next, I style the top-level list in the navigation bar:
#navigationBar ul {
margin: 0;
padding: 0;
Free download pdf