Latest Posts
InfoTechSite
Web Designing Tutorials

How To Create Simple Menu Using CSS ?

Google+ Pinterest LinkedIn Tumblr
Pinterest

By using CSS codes we can create websites menus more easily with very simple and small number of codes. So uses of CSS menus on websites makes your website lighter and faster, also runs on almost all of the browsers. Here I have given some useful steps and codes for creating simple menu using CSS. It may help you to make simple, attractive and awesome menu for your own website by using the following steps and codes.

To Create Simple Menu Using CSS

# At first create the following HTML codes on your webpage.
Replace the “#” with your link URL included in the HTML code below.
<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>
# Create a CSS file with the following codes.
Replace the ‘back.jpg’ with your image file included in the css code below.
#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;
}
# Link CSS file to the web page.
Add the following code to link CSS file to the web page between <head> tags.
<head>

<link rel="Stylesheet" type="text/css" href="style.css">

</head>

Preview of  CSS Menu

#navigation{
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;
}

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 5 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Related Posts