Simple-css-dropdown-menu-techfar

Make a simple css dropdown menu

Hi there! What’s up ? Today we learn how easy it can be to create a drop down menu.

Why use Dropdown Menu ?

Dropdown menu is very important things of website, If you have a product or other type site that’s have many service or products. Now how to sort item easily? Yes we  solving this problem by dropdown menu.

 What language should be used ?

We use simply html and css not jquery .Because we make this dropdown menu very easily .

Now start this, firstly create html page


	
		
		
		
	
	
	
		
	


Save the html page name menu.php

/*techfar.com dropdown menu */
.navmenu{
margin:0px;
padding:0px;
}

.navmenu ul{
margin:0px;
padding:0px;
line-height:30px;
}

.navmenu li{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
background:#11b300;
}

.navmenu li:hover{

background:#3ee42d;
}

.navmenu ul li:hover ul li a:hover{

background:#3ee42d;
}
.navmenu ul li a{
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#fff;
border:1px solid white;
text-shadow:1px 1px 1px black;
}

.navmenu ul ul{
position:absolute;
visibility:hidden;
top:33px;
}
.navmenu ul li:hover ul{
visibility:visible;
}

You can also adjust the color of your choice and categories.

This is very simple dropdown menu. But we hope that the next tutorial we make a advance dropdown menu. How is it that today,please through the comment .

Demo Download Now

Comments
  1. Hey nice job. Keep it up ;)

  2. You are actually a excellent webmaster. The web site loading speed is incredible. It sort of feels that you are doing any unique trick. Also, The contents are masterpiece. you’ve done a great process on this topic!

  3. You could definitely see your skills within the paintings you write. The world hopes for even more passionate writers like you who aren’t afraid to say how they believe. All the time follow your heart.

    • welcome ashby :D , thanks for your comment . I always try to write simply but effective .

ADD YOUR COMMENT

*
CommentLuv badge
Close
Free Tutorial for you !
If you like this site , like and stay for new amazing tutorial !!

Twitter

Facebook

Google+