Question

Horizontal Navigation List Styles

Go to the Horizontal Navigation List Styles section. Karen has added a second navigation list that she wants to display horizontally. For all list items within the horizontal navigation list, create a style rule that displays the items as blocks with a width of 12.5% floated on the left margin.
Here is my code:
/* Horizontal Navigation List Styles */
.horizontal li {
display: block;
width: 12.5%;
float: left;
}
It's coming through as just a line and I have no idea how to fix it, please help!

Answer 1

Step-by-step explanation:

The best way to do this would be to use the following line of code

clear: left;

This would make sure that there are no floating elements (li's in this scenario) on the left side of each element. Which in this navigation list would be each individual element, causing it to move each element underneath the previous element. Therefore the entire CSS code would be

.horizontal li {

display: block;

width: 12.5%;

float: left;

clear: left;

}

An example can be seen in the attached picture below.