ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Tutorial - How to make a simple navigation bar in CSS3

Updated on July 1, 2012

With CSS3 it is now very easy to make a simple navigation bar in simple steps. Navigation bar can be made without images too.

We will make a simple CSS3 navigation bar which will work in most web browsers.

Lets get started

Make a css file example style.css

Make a id topnav with following properties

margin-top: 50px;
float: left;
height: 50px;
width: 1000px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
Background: Blue;

This css code will be used in a div. The properties define a 1000 x 50 pixel box with blue background. You can change background color according to your need. The edges will be rounded to make it look sleek. Different properties are used for border radius to work in different browsers.

Unordered list properties

list-style-type: none;


This property tells not to use any style in list.

Properties for list elements

ul li{
display: inline;
height: 50px;
padding: 2px 15px 2px 5px;

These properties define that the list elements will be placed horizontally. Padding is done to make the space between text elements.

Properties for Anchor Tag

ul li a
	font-size: 20px;
	color: white;
	text-transform: uppercase;
	font-family: calibri;
        text-decoration: none;
	text-shadow: #000 ;

These properties are for Anchor tag in navigation bar. Font size is given size 20 pixel with white color. Text is transformed to uppercase. Use any font you like and use text decoration as none.

Change text color on mouse over

ul li a:hover

Then save the CSS file and then create a html file.

Code for HTML page

<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="stylesheet" type="text/css" href="style.css" />
<div id="topnav"; class="red">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<!-- Other body content

Now we have completed using navigation bar and it will look like this. Meta tag is used to make it work in Internet Explorer 9.


    0 of 8192 characters used
    Post Comment

    • goldookies profile image

      goldookies 5 years ago from California

      Nice guide, lots of information and very thorough. A+