#ref-menu
Free Drop Down Menu
100% Free HTML with Css Drop Down Menu Navigation
Hey guys! I am Abid Ullah, Again with new html Drop Down Menus Menu Navigation for your website!
If you looking for hundred per cent free CSS/HTML Drop Down Menu then you come to a right place in the entire blog society.
The drop down menu is the first element that can put good impression on your visitor and also easy navigate products list.
If you want to Develope a website or redesign your website Drop Down Menu or Menu, Side Bar, and Footer, Just copy HTML/CSS code or download the both .
Design View.
Related Design Views
Click here to Download
Click here to Download..
Click here to Download..
Click here to download..
Click here to Download..
Click here to Download..
Click here to Download
Click here to Download..
Click here to Download
Hey guys! I am Abid Ullah, Again with new html Drop Down Menus Menu Navigation for your website!
If you looking for hundred per cent free CSS/HTML Drop Down Menu then you come to a right place in the entire blog society.
The drop down menu is the first element that can put good impression on your visitor and also easy navigate products list.
If you want to Develope a website or redesign your website Drop Down Menu or Menu, Side Bar, and Footer, Just copy HTML/CSS code or download the both .
Html Code
|
CSS 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 Drop-down Menu</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Templates</a></li>
<li><a href="#">Designing »</a>
<ul>
<li><a href="#">Logos</a></li>
<li><a href="#">Website »</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">side Bar</a></li>
<li><a href="#">Side Bar 2 </a></li>
<li><a href="#">Header</a></li>
<li><a href="#">Footer</a></li>
</ul>
</li>
<li> <a href="#">Blogging </a></li>
<li> <a href="#">Blog designing </a></li>
</ul>
</li>
<li><a href="#">Outer</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Software</a>
<ul>
<li><a href="#">Photo Shop</a></li>
<li><a href="#">Notepad++</a></li>
<li><a href="#">Notepad</a></li>
<li><a href="#">Dreamweaver CS5</a></li>
</ul>
</li>
</ul>
</nav>
<div id="content">
<p>This my Blog, YesEdu9.blogspot.com</p>
</div>
</div>
</body>
</html>
|
@charset "utf-8";
/* CSS Document */
*{
padding:0;
margin:0;
}
body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#wrapper{
width:960px;
margin:auto;
}
#content{
width:100%;
height:300px;
}
#content p{
padding:5px;
}
/*this is main menu*/
nav{
margin-top:10px;
}
nav ul {
list-style:none; /* This Code remove Bullet */
background:#2c3e50; /*This Code change a Color */
border-radius:5px; /*This code change corner Angle*/
}
nav ul:after{
content:".";
clear:both;
visibility:hidden;
display:block;
height:0px;
}
nav ul li{
float:left; /*This Code place the ul list to the left*/
position:relative;
line-height:20px;
}
nav ul li a{
display:block;
color:#fff;
text-decoration:none;
padding:14px 15px 15px;
font-size:18px;
-webkit-transition:0.3s ease-out;
}
nav ul li:hover > a{
color:#3498db;
}
nav ul li.active > a{
color:#2980b9;
}
nav ul li > ul:before{
content:"";
border-style:solid;
border-width:0 9px 9px 9px;
border-color:transparent transparent #2c3e50 transparent;
width:0;
height:0;
position:absolute;
left:15px;
top:5px;}
nav ul li > ul{
position:absolute;
left:14px;
top:80%;
padding-top:13px;
background:none;
width:150px;
z-index:-9999;
opacity:0;
-webkit-transition: 0.3s easy-out;
}
nav ul li:hover > ul{display:block;
z-index:100;
opacity:1;
top:95%;
}
nav ul li > ul li{
padding:0 3px 3px;
background:#2c3e50;
width:100%;
}
nav ul li > ul li:first-child{border-radius:4px 4px 0 0; padding-top:3px;}
nav ul li > ul li:last-child{border-radius: 0 0 4px 4px;}
nav ul li > ul li a{
display:block;
padding:6px 9px;
border-radius:2px;
font-size:14px;
}
nav ul li > ul li:hover > a{
color:#fff;
background:#3498db;}
nav ul li > ul li.active >a{
color:#fff;
background:#2c3e50;
}
nav ul li > ul li > ul:before{
content:"";
border-style:solid;
border-width:0 9px 9px 9px;
border-color:transparent transparent #2c3e50 transparent;
width:0;
height:0;
position:absolute;
left:0px;
top:15px;
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform:rotate(270deg);
transform:rotate(270deg);
}
nav ul li > ul li > ul{
top:0;
left:100%;
padding:0px;
padding-left:13px;
-webkit-transsition:0.3s easy-out;
-ms-transsition:0.3s easy-out;
-moz-transsition:0.3s easy-out;
-o-transsition:0.3s easy-out;
transsition:0.3s easy-out;
}
nav ul li > ul li :hover > ul{
display:block;
opacity:1;
z-index:100;
top:0;
left:100%;
}
|
Download
|
Design View.
Demo
Related Design Views
Click here to Download
Click here to Download..
Click here to Download..
Click here to download..
Click here to Download..
Click here to Download..
Click here to Download
Click here to Download..
Click here to Download
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.