In this mini tutorial I will explain how to create a menu with css.
Demo works in Safari, Chrome, Opera, Firefox, IE6 and IE7.
html code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Css Menu</title> </head> <body> <ul id="menu"> <li><a href="#"><b></b>Home</a></li> <li><a href="#"><b></b>Services</a></li> <li><a href="#"><b></b>Porfolio</a></li> <li><a href="#"><b></b>About Us</a></li> <li><a href="#"><b></b>Contact</a></li> </ul> <ul id="menu2"> <li><a href="#"><b></b>Home</a></li> <li><a href="#"><b></b>Services</a></li> <li><a href="#"><b></b>Porfolio</a></li> <li><a href="#"><b></b>About Us</a></li> <li><a href="#"><b></b>Contact</a></li> </ul> <ul id="menu3"> <li><a href="#"><b></b>Home</a></li> <li><a href="#"><b></b>Services</a></li> <li><a href="#"><b></b>Porfolio</a></li> <li><a href="#"><b></b>About Us</a></li> <li><a href="#"><b></b>Contact</a></li> </ul> <ul id="menu4"> <li><a href="#"><b></b>Home</a></li> <li><a href="#"><b></b>Services</a></li> <li><a href="#"><b></b>Porfolio</a></li> <li><a href="#"><b></b>About Us</a></li> <li><a href="#"><b></b>Contact</a></li> </ul> <ul id="menu5"> <li><a href="#"><b></b>Home</a></li> <li><a href="#"><b></b>Services</a></li> <li><a href="#"><b></b>Porfolio</a></li> <li><a href="#"><b></b>About Us</a></li> <li><a href="#"><b></b>Contact</a></li> </ul> </body> </html>
Css Code :
#menu {
height:5px;
list-style:none outside none;
margin:0 0 50px 10px;
padding:0;
}
#menu li {
float:left;
}
#menu li a {
border:1px solid #314108;
color:white;
display:block;
font-family:verdana,arial,sans-serif;
font-size:11px;
font-weight:bold;
height:30px;
line-height:30px;
margin-right:-1px;
overflow:hidden;
padding:0 30px;
position:relative;
text-decoration:none;
z-index:10;
}
#menu li a b {
background:url("back.gif") repeat-x scroll left top transparent;
display:block;
height:100px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:-1;
}
#menu li a:hover b{
display:block;
top:-50px;
color:white;
}
#menu2 {
height:5px;
list-style:none outside none;
margin:0 0 50px 10px;
padding:0;
}
#menu2 li {
float:left;
}
#menu2 li a {
border:1px solid #88150c;
color:white;
display:block;
font-family:verdana,arial,sans-serif;
font-size:11px;
font-weight:bold;
height:30px;
line-height:30px;
margin-right:-1px;
overflow:hidden;
padding:0 30px;
position:relative;
text-decoration:none;
z-index:10;
}
#menu2 li a b {
background:url("back2.gif") repeat-x scroll left top transparent;
display:block;
height:100px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:-1;
}
#menu2 li a:hover b{
display:block;
top:-50px;
color:white;
}
#menu3 {
height:5px;
list-style:none outside none;
margin:0 0 50px 10px;
padding:0;
}
#menu3 li {
float:left;
}
#menu3 li a {
border:1px solid #e4e4e4;
color:black;
display:block;
font-family:verdana,arial,sans-serif;
font-size:11px;
font-weight:bold;
height:30px;
line-height:30px;
margin-right:-1px;
overflow:hidden;
padding:0 30px;
position:relative;
text-decoration:none;
z-index:10;
}
#menu3 li a b {
background:url("back3.gif") repeat-x scroll left top transparent;
display:block;
height:100px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:-1;
}
#menu3 li a:hover b{
display:block;
top:-50px;
color:white;
}
#menu4 {
height:5px;
list-style:none outside none;
margin:0 0 50px 10px;
padding:0;
}
#menu4 li {
float:left;
}
#menu4 li a {
border:1px solid #5f048f;
color:white;
display:block;
font-family:verdana,arial,sans-serif;
font-size:11px;
font-weight:bold;
height:30px;
line-height:30px;
margin-right:-1px;
overflow:hidden;
padding:0 30px;
position:relative;
text-decoration:none;
z-index:10;
}
#menu4 li a b {
background:url("back4.gif") repeat-x scroll left top transparent;
display:block;
height:100px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:-1;
}
#menu4 li a:hover b{
display:block;
top:-50px;
color:white;
}
#menu5 {
height:5px;
list-style:none outside none;
margin:0 0 50px 10px;
padding:0;
}
#menu5 li {
float:left;
}
#menu5 li a {
border:1px solid black;
color:white;
display:block;
font-family:verdana,arial,sans-serif;
font-size:11px;
font-weight:bold;
height:30px;
line-height:30px;
margin-right:-1px;
overflow:hidden;
padding:0 30px;
position:relative;
text-decoration:none;
z-index:10;
}
#menu5 li a b {
background:url("back5.gif") repeat-x scroll left top transparent;
display:block;
height:100px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:-1;
}
#menu5 li a:hover b{
display:block;
top:-50px;
color:white;
}