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

ptg16476052

Creating Drop-Down Menus 309

11

position: absolute;
height: 100%;
width: 100%;
list-style-type: none;
background-color: #eeeeee;
overflow: visible;
}

Again, I remove the margins and padding. This time, I position the list absolutely, rela-
tive to its container. Its height and width are set to 100% so that it fills the container, and
the bullets for the list are disabled. I also specify a background color and allow overflow
in the list to be shown. The next step is styling the list items in the top-level list. I use the

selector to make sure that these styles only affect the list items in the top-level lists and
not those in child lists.

#navigationBar ul > li {
display: block;
float: left;
height: auto;
/ menu header's items width /
width: 120px;
}

I float the list items to the left, set them to block display, and specify a width for each list
item. The next step is to style the links in the top-level list:

#navigationBar li > a {
display: block;
padding: 0 0 0 10px;
height: 100%;
width: 109px;
border-right: 1px black solid;
line-height: 30px;
font-family: sans-serif;
font-size: 17px;
text-decoration: none;
background-color: #eeeeee;
color: #5d5636;
}

I apply a lot of styles to the link to get it to look just right and to get it to fit properly in
the layout. Next it’s time to start working on the nested lists. First, the nested list itself:

#navigationBar ul ul {
margin-top: 2px;
display: none;
position: static;
height: auto;