Free Drop Down Navigation Bar - Yes Edu

Hot

Make Money

Friday, 16 December 2016

Home Unlabelled Free Drop Down Navigation Bar

Free Drop Down Navigation Bar

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 .





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 &raquo;</a>
             <ul>
             <li><a href="#">Logos</a></li>
             <li><a href="#">Website &raquo;</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
Author Image

About Abid Ullah
Abid Ullah is Young System Support Engineer, Professional webmaster, Civil Engineer(DAE), IT and SEO expert, Seeking knowledge to Improve His Own Experience with a Goal to Educate Others in Easy English Language. for your blog.

If you thing the post is helpull to you to your friend, classmate and for social(Facebook, Twitter, Pinterest) site friend

By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Post Top Ad

Your Ad Spot