Table of Contents
To Create Simple Menu Using CSS
<div id="navigation"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Item1</a> <ul> <li><a href="#">SubItem1</a></li> <li><a href="#">SubItem2</a></li> <li><a href="#">SubItem3</a></li> <li><a href="#">SubItem4</a></li> </ul> </li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a></li> </ul> </div>
#navigation{ width:auto; height:30px; float:left; background-image: url('back.jpg'); border:none; margin-top:20px; margin-left:0px; } #nav{ list-style: none; padding:0px; display:block; margin-top:2px; } #nav li{ font-size:20px; float:left; position:relative; width:180px; hight:50px; display:block; align:center; padding-left:10px; } #nav ul{ list-style:none; margin:0; padding:0; width: auto; display:none; } #nav li:hover{ background-image:url('back.jpg'); background-repeat:no-repeat; background-size:cover; } #nav li:hover>ul{ display:block; position:absolute; } #nav li ul{ left:0px; margin-top:0px; padding-top:0px; } #nav li ul li{ background-image:url('back.jpg'); background-repeat:no-repeat; background-size:cover; border:1px solid #e3e3e3; padding-left:10px; width:178px; } #nav a:link, #nav a:active, #nav a:visited{ display:block; color:#ff00aa; text-decoration:none; }
<head> <link rel="Stylesheet" type="text/css" href="style.css"> </head>
Preview of CSS Menu
width:auto;
height:30px;
float:left;
background-image: url(‘http://1.bp.blogspot.com/-yXa3ZZIgecw/UuDTmCwxNCI/AAAAAAAAAZA/T4R7fy2UtqM/s1600/back.jpg’);
border:none;
margin-top:20px;
margin-left:0px;
}
#nav{
list-style: none;
padding:0px;
display:block;
margin-top:2px;
}
#nav li{
font-size:20px;
float:left;
position:relative;
width:160px;
hight:50px;
display:block;
align:center;
padding-left:10px;
}
#nav ul{list-style:none;
margin:0;
padding:0;
width: auto;
display:none;
}
#nav li:hover{
background-image:url(‘http://1.bp.blogspot.com/-yXa3ZZIgecw/UuDTmCwxNCI/AAAAAAAAAZA/T4R7fy2UtqM/s1600/back.jpg’);
background-repeat:no-repeat;
background-size:cover;
}
#nav li:hover>ul{
display:block;
position:absolute;
}
#nav li ul{
left:0px;
margin-top:0px;
padding-top:0px;
}
#nav li ul li{
background-image:url(‘http://1.bp.blogspot.com/-yXa3ZZIgecw/UuDTmCwxNCI/AAAAAAAAAZA/T4R7fy2UtqM/s1600/back.jpg’);
background-repeat:no-repeat;
background-size:cover;
border:1px solid #e3e3e3;
padding-left:10px;
width:158px;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
color:#ff00aa;
text-decoration:none;
}