Create a simple MENU in CSS
Today we create a simple MENU in CSS. Click here to see the final result!
[1] Let’s to create the CSS:
<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>
Note:
text-decoration: none; I put this expresion 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=”#” mce_href=”#”>HOME</a></div>
<div><a href=”#” mce_href=”#”>SERVICES</a></div>
<div><a href=”#” mce_href=”#”>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=”#” mce_href=”#”>HOME</a></div>
<div><a href=”#” mce_href=”#”>SERVICES</a></div>
<div><a href=”#” mce_href=”#”>CONTACT</a></div></center>
</body>
</html>
That’s it! Here is the final result!
Tags: cascade style sheet, Create a Menu in CSS, Create MENU, CSS, Design, how to, Programming, scripts, site, sitedesign, tips&tricks, tutorial, w3c, webdesign, website, worldwideweb consortium