Main Content Section
You can use this style of NAVIGATION as your main navigation or use it for additional navigation if you need it.
The HTML Code:
<div id="sidenav">
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About Us</a> </li>
<li> <a href="products.html">Our Products</a> </li>
<li> <a href="news.html">In the News</a> </li>
<li> <a href="contact.html">Contact Us</a> </li>
</ul>
</div>
The CSS Styles:
ul, li {padding: 0; margin: 0;}
#sidenav {width: 200px; text-align: left; float: left;}
#sidenav ul {list-style: none;
margin-left: 10px;
margin-bottom: 15px;
font-family: Comic Sans MS, sans-serif;
letter-spacing: 1px;}
#sidenav li {width: 180px;
border: 1px solid #4e5db4;
background-color: #394484;
/* Add: margin-bottom: 5px; to add a space between each button */
}
#sidenav li a {display: block;
padding: 10px 0 10px 30px;
text-decoration: none; /* deletes the underline */
font-weight: bold;
color: #792d0b;}
#sidenav li a:hover {background-color: #8f97c2;
color: #ffffff; }