Horizontal Navigation using list property

(average: 3.00 out of 5)

 Loading ...

Basically, there are two methods to list the links horizontally. One is by using the Float method and another is by display as inline method.
Here is a sample html code which would be used to show the navigation list items.

<ul class="hoznavi">
<li><a href="Link1">Title one</a></li>
<li><a href="Link2">Title two</a></li>
<li><a href="Link3">Title three</a></li>
</ul>

I will show you how to list these list items horizontally with rollover effect by using above mentioned methods.

Float method:
By using float: left property, the list items will floated left and stacked up to form in a horizontal row. If you want to display the links as a block with a background image, then you can make use of “display: block” in addition to float. By using the “display: block”, it is possible to to set the height and width to the link elements.
Below is a simple css styles for this method.
CSS:

ul.hoznavi{list-style: none; padding: 0; margin: 0;}
ul.hoznavi li{float: left; margin-right: 10px;}
ul.hoznavi li a{color: #666; text-decoration: none; font-weight: bold; display:block; width: 75px; text-align: center; background-color: #ccc; }
ul.hoznavi li a:hover { color: #fff; background-color: #666; }

Display as Inline:

This method uses the display: inline property to form the list items in a horizontal row.
CSS:

ul.hoznavi{list-style: none; padding: 0; margin: 0;}
ul.hoznavi li{display: inline;}
ul.hoznavi li a{color: #666; text-decoration: none; text-align: center; font-weight: bold; padding: 0 10px 0 10px; background-color: #ccc;}
ul.hoznavi li a:hover { color: #fff; background-color: #666; }