Thursday, 22 January 2015

ADVANCE DROP DOWN MENU BAR FOR YOUR BLOGGER


<<<< COPY ALL THE CODES BELOW AND PASTE IT ON YOUR BLOGGER >>>>>


<style>
/* Menu Dropdown */
  .cf:before,
  .cf:after {
      content: " ";
      display: table;
  }

  .cf:after {

      clear: both;
  }

  .cf {

      *zoom: 1;
  }

  .menu,

  .submenu {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .menu {  

   margin: 50px auto;
   width: 800px;  
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content;
  }

  .menu > li {

   background: #34495e;
   float: left;
   position: relative;
   transform: skewX(25deg);
  }

  .menu a {

   display: block;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 14px;
  }

  .menu li:hover {

   background: #e74c3c;
  }

  .menu > li > a {

   transform: skewX(-25deg);
   padding: 1em 2em;
  }

  /* Dropdown */

  .submenu {
   position: absolute;
   width: 200px;
   left: 50%; margin-left: -100px;
   transform: skewX(-25deg);
   transform-origin: left top;
  }

  .submenu li {

   background-color: #34495e;
   position: relative;
   overflow: hidden;
  }    

  .submenu > li > a {

   padding: 1em 2em;  
  }

  .submenu > li::after {

   content: '';
   position: absolute;
   top: -125%;
   height: 100%;
   width: 100%;  
   box-shadow: 0 0 50px rgba(0, 0, 0, .9);  
  }

  .submenu > li:nth-child(odd){

   transform: skewX(-25deg) translateX(0);
  }

  .submenu > li:nth-child(odd) > a {

   transform: skewX(25deg);
  }

  .submenu > li:nth-child(odd)::after {

   right: -50%;
   transform: skewX(-25deg) rotate(3deg);
  }  

  .submenu > li:nth-child(even){

   transform: skewX(25deg) translateX(0);
  }

  .submenu > li:nth-child(even) > a {

   transform: skewX(-25deg);
  }

  .submenu > li:nth-child(even)::after {

   left: -50%;
   transform: skewX(25deg) rotate(3deg);
  }

  /* Show dropdown */

  .submenu,
  .submenu li {
   opacity: 0;
   visibility: hidden;  
  }

  .submenu li {

   transition: .2s ease transform;
  }

  .menu > li:hover .submenu,

  .menu > li:hover .submenu li {
   opacity: 1;
   visibility: visible;
  }

  .menu > li:hover .submenu li:nth-child(even){

   transform: skewX(25deg) translateX(15px);  
  }

  .menu > li:hover .submenu li:nth-child(odd){

   transform: skewX(-25deg) translateX(-15px);  
  }
</style>

<br />

<ul class="menu cf">
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
<li>
        <a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a>
        <ul class="submenu">
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Submenu item</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=1719501309664700552">Menu item</a></li>
</ul>
<div>


Your Feed Back Plz
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment