I need the navigation list to be displayed correctly on the page. I cannot under

Question

I need the navigation list to be displayed correctly on the page. I cannot understand why the webpage will not display the nav list horizontally. What am I doing wrong?

/* Page Body Styles */ body { margin-left: auto; margin-right: auto; max-width: 960px; min-width: 640px; width: 95%; } body > header > nav.horizontalNavigation li { width: 16.66%; } /* Image Styles */ body > header > img { display: block; width: 100%; } /* Horizontal Navigation Styles */ nav.horizontalNavigation li { display:block; float: left; } nav.horizontalNavigation a { display: block; text-align: center; } /* Row Styles */ /* Column Styles */ /* Specials Styles */ /* Award Styles */ /* Footer Styles */

Explanation / Answer

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

1. Using Inline list items.

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

li {
    display: inline;
}

display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line.

Floating List Items

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout for the navigation links:

li {
    float: left;
}

a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background color:

Example:

ul {
    background-color: #dddddd;
}

Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}

Right-Align Links

Right-align links by adding a new <ul> inside the <ul> with float:right;:

Example:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <ul>
    <li><a class="active" href="#about">About</a></li>
    <li><a href="#login">Login</a></li>
  </ul>
</ul>

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.