If you don't know how to create a menu then you can follow this tutorial. Paste the code in a html file. Ex: menu.html
<!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"
charset=utf-8" />
<title>My Beautiful css menu</title>
<link href="menu.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Desktops</a></li>
<li><a href="#">Laptops &
Notebooks</a></li>
<li><a href="#">Components</a>
<ul>
<li><a href="#"> Mice and Trackballs</a></li>
<li><a href="#"> Monitors</a></li>
<li><a href="#"> Printers</a></li>
<li><a href="#"> Scanners</a></li>
<li><a href="#"> Web Cameras</a>
<ul>
<li><a href="#"> Mice and Trackballs</a></li>
<li><a href="#"> Monitors</a></li>
<li><a href="#"> Printers</a></li>
<li><a href="#"> Scanners</a></li>
<li><a href="#"> Web Cameras</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Software</a></li>
</ul>
</div>
</body>
</html>
Now, save the file.
Save the bellow code with name menu.css
.menu {
background: none repeat scroll 0 0 #1A1A1A;
display: block;
height: 40px;
margin: 0 auto;
width: 960px;
}
.menu ul{
padding:0;
margin:0;
}
.menu ul li{
float:left;
list-style:none;
position:relative;
width:150px;
}
.menu ul li a{
font-size:14px;
padding:12px 10px;
text-decoration:none;
display:block;
color:#0FF;
background:#000;
}
.menu ul li a:hover{
color:#F00;
background:#666;
}
.menu ul li ul{
top:39px;
width:150px;
left:0;
padding:0;
margin:0;
position:absolute;
display:block;
visibility:hidden;
}
.menu ul li:hover ul{
display:block;
visibility:visible;
}
.menu ul li:hover ul li ul{
display:block;
left:150px;
position:absolute;
width:150px;
top: 0;
padding:0;
margin:0;
visibility:hidden;
}
.menu ul li ul li:hover ul{
display:block;
visibility:visible;
}
And save this file and run your menu.html file.
0 comments:
Post a Comment