On this page we will prepare the unordered list before we begin styling the list items and links.
- Add the following UL rule to the style sheet:
div#topnav ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 100%;
}
Which results in this display:
Currently the example does not look all that different from the way the vertical menu example looked at this stage. The exception is that the background color spans the entire width of the window. Our list is not yet displaying in a horizontal fashion but it soon will.
The bullets are no longer displayed and the margins and padding have been removed. The list items are tight against the edges of the topnav DIV and there is no space between each list item.
All of the elements must be floated in order for the horizontal menu to display properly. At this point we do not see the effect of the floats we have thus far applied. It is a cumulative effect and will not display properly until all elements are floated. It is still too early to see the effect.
The list width is set to 100% as is the topnav DIV. The proper look will begin to take shape as we get more of the elements styled.