Post
Ask Question

Fix Horizontal Navigation

The html Code is :
  1. <div id="nav">  
  2.     <div id="nav-wrapper">  
  3.         <ul>  
  4.             <li><a href="#">item #1</a></li>  
  5.             <li><a href="#">item #2</a></li>  
  6.             <li><a href="#">item #3</a></li>  
  7.             <li><a href="#">item #4</a></li>  
  8.             <li><a href="#">item #5</a></li>  
  9.         </ul>  
  10.     </div>  
  11. </div>  
  12.   
  13. <div id="wrapper">  
  14.     <div id="content">  
  15.         <h3>This is a heading!</h3>  
  16.         <p>You're learning how to create a fixed horizontal navigation menu!</p>  
  17.     </div>  
  18. </div>  
And css code is for giving styling.
  1. body{ overflow-y: scroll; padding: 0; margin: 0; font-family: Arial; font-size: 16px; background-color: #F1F1F1; height: 2000px; }  
  2.   
  3. #nav{ background-color: #0072BA; position: fixed; width: 100%; top: 0; }  
  4. #nav-wrapper{ width: 960px; margin: 0 auto; text-align: left; }  
  5. #nav ul{ list-style-type: none; padding: 0; margin: 0; }  
  6. #nav ul li{ display: inline-block; }  
  7. #nav ul li:hover{ background-color: #333; }  
  8. #nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }  
  9.   
  10. #wrapper{ width: 960px; margin: 0 auto; text-align: left; }  
  11. #content{ background-color: #FFF; border: 3px solid #DDD; padding: 20px; margin: 80px 0 0 0; }  
And final output is :