Horizontal Navbar

by Kyle Mitofsky

HTML

<ul class="horizontal" id="nav">
	<li><a href="#" class="active">About Us</a></li>
	<li><a href="#">Our Products</a></li>
	<li><a href="#">FAQs</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Login</a></li>
</ul>






<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    Based Off This Post: <a href='http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/#.Ut6kNBAo5hE'>Super Simple Horizontal Navbar</a><br/>
<div>

CSS

ul.horizontal {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
}
ul.horizontal li {
    float: left;
}
ul.horizontal {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
ul.horizontal li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}
ul.horizontal li a:hover {
    color: #c00;
    background-color: #fff;
}
ul.horizontal li a.active {
    background-color: rgb(201, 205, 248);
}