Home HTML and CSS Tutorials Create a Simple Menu in CSS

Create a Simple Menu in CSS

Author: PiticStyle More by this author

Added: Jun 19, 2008 Rating:

Level: Beginner Software: Dreamweaver

Today we create a simple MENU in CSS.

1. Let's to create the CSS:

Note: text-decoration: none; I put this expression to remove the line under the link!

2. Now we need to create the HTML code:

<html>
<body>
<head>
<title>Create a simple Menu in CSS</title>
/* Here is the CSS code */
</head>
<body><center><h1><u>Create a simple Menu in CSS</u></h1>
<br><br>
<div><a href="/img_articles/15093/#" mce_href="/img_articles/15093/#">HOME</a></div>
<div><a href="/img_articles/15093/#" mce_href="/img_articles/15093/#">SERVICES</a></div>
<div><a href="/img_articles/15093/#" mce_href="/img_articles/15093/#">CONTACT</a></div></center>
</body>
</html>

The entire code:

<html>
<body>
<head>
<title>Create a simple Menu in CSS</title>
<style type="text/css">
body {
text-align: left;
background-image: url("bg.gif");
}
div {
width: 100px;
height: 20px;
background-color: #338ce8;
}
div:hover
{
background-color: #085ea6;
}
a {
color: white;
font-size: 18px;
text-decoration: none;
}
</style>
</head>
<body><center><h1><u>Create a simple Menu in CSS</u></h1>
<br><br>
<div><a href="/img_articles/15093/#" mce_href="/img_articles/15093/#">HOME</a></div>
<div><a href="/img_articles/15093/#" mce_href="/img_articles/15093/#">SERVICES</a></div>
<div><a href="/img_articles/15093/#" mce_href="/img_articles/15093/#">CONTACT</a></div></center>
</body>
</html>

That's it! Here is the final result!

Author's URL: PiticStyle