How to create top menu Navigation with HTML and CSS

Your website content will be here

Add your website content here, text, phontos, videos, media, etc.

Bottom footer

Try yourself >>

In this lesson you will learn how to create top menu Navigation

This lesson include:

  • HTML Instructions
  • CSS Instructions

We will add comments inside the example code boxes to explain as much as we can, comments are in grey color.

Part 1


Follow our comments inside the code example box ( in grey ).

Visit our HTML Editors lesson if you don't know how to open and edit HTML file:

HTML Editors >>

Visit our HTML Forms Guide to learn more about HTML Forms

Visit our CSS Forms Guide to learn more about CSS Forms

Code Example:

              <div class="topnavigation">
  <a class="active" href="#home">Home</a>
  <a href="#articles">Articles</a>
  <a href="#categories">Categories</a>
  <a href="#contact us">Contact us</a>

Part 2


Add the style sheets:

Code Example:

      /* the font type and margin */
body{margin: 0;
  font-family: Arial, Helvetica, sans-serif;  

/* the background color */
  overflow: hidden;  
  background-color: #333;

/* the link style(each box) */
.topnavigation a{  
  color: #f2f2f2;
  float: left;
  text-align: center;
  padding: 13px 15px;
  font-size: 19px;
  text-decoration: none;

/*when you hover on top of links */
.topnavigation a:hover{  
  color: black; 
  background-color: #CFD2D3;

  /* which link is highlighted with color */
  color: white;  
  background-color: #32a7a4;
Try yourself >>

Visit our CSS Media Queries tutorial to create responsive mobile friendly navigation menus and more CSS Media Queries tutorial

we hope you enjoyed this lesson, we provide computer coding classes online free , with us you can easily learn programming online, our main goal is to allow students to learn computer programming, learn front end development to server side development easily and free,we are free and always will be learnprogramming