Menu Navigasi Blogger Dropdown

CODE CSS:

/* Menu CSS Aiiox.blogspot.com*/ 

#cssmenu,

#cssmenu > ul {

  background: #fff repeat;

  padding-bottom: 3px;

  font-family: 'Open Sans', sans-serif;

  font-weight: normal;

  color:#000;

}

#cssmenu:before,

#cssmenu:after,

#cssmenu > ul:before,

#cssmenu > ul:after {

  content: "";

  display: table;

}

#cssmenu:after,

#cssmenu > ul:after {

  clear: both;

}

#cssmenu {

  width: auto;

  zoom: 1;

}

#cssmenu > ul {

  background:#fff repeat;

  margin: 0; 

  border-bottom: 4px solid #fd0210;

  border-top: 1px solid #F1D9FF;

  padding: 0;

  position: relative;

}

#cssmenu > ul li {

  margin: 0;

  padding: 0;

  list-style: none;

}

#cssmenu > ul > li {

  float: left;

  position: relative;

}

#cssmenu > ul > li > a {

  padding: 11px 16px;

  display: block;

  color: #000;

  font-size: 12px;

  font-weight: bold;

  text-decoration: none;

  line-height: 11px;

}

#cssmenu > ul > li:hover > a {

  background: #Fd0210 repeat;

  color:#fff }

#cssmenu > ul > li > a > span {

  line-height: 11px;

}

#cssmenu > ul > li.active > a,

#cssmenu > ul > li > a:active {

  background: #fd0210 repeat;

}

/* Childs Aiiox.blogspot.com*/

#cssmenu > ul ul {

  opacity: 0;

  visibility: hidden;

  position: absolute;

  top: 120px;

  background: #fd0210 repeat;

  margin: 0;

  padding: 0;

  z-index: -1;

}

#cssmenu > ul li:hover ul {

  opacity: 1;

  visibility: visible;

  margin: 0;

  color: #000;

  z-index: 2;

  top: 33px;

  left: 0;

}

#cssmenu > ul ul:before {

  content: "";

  position: absolute;

  top: -10px;

  width: 100%;

  height: 20px;

  background: transparent;

}

#cssmenu > ul ul li {

  list-style: none;

  padding: 0;

  margin: 0;

  width: 100%;

}

#cssmenu > ul ul li a {

  padding: 10px 15px;

  display: block; 

  color: #000;

  border-bottom: 1px solid #fff;

  font-size: 12px;

  text-decoration: none;

  width: 250px;

  -webkit-transition: all 0.35s ease-in-out;

  -moz-transition: all 0.35s ease-in-out;

  -ms-transition: all 0.35s ease-in-out;

  transition: all 0.35s ease-in-out;

}

#cssmenu > ul ul li a:hover {

  border-left: 2px solid #333;

  border-right: 2px solid #333;

  background: #BC051C repeat;

  color: #fff;

}

#cssmenu > ul ul li a:active {

  background: #fd0210 repeat;

}

CODE HTML

 

<div id='cssmenu'>

<ul>

   <li><a href='index.html'><span>Home</span></a></li>

   <li class='has-sub'><a href='#'><span>Products</span></a>

      <ul>

         <li><a href='#'><span>Widgets</span></a></li>

         <li><a href='#'><span>Menus</span></a></li>

         <li class='last'><a href='#'><span>Products</span></a></li>

      </ul>

   </li> 

   <li class='has-sub'><a href='#'><span>Company</span></a>

      <ul>

         <li><a href='#'><span>About</span></a></li>

         <li class='last'><a href='#'><span>Location</span></a></li>

      </ul>

   </li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

 Cara memasang code script Menu Navigasi Dropdown

1. Login Blogger
2. Template -> Edit HTML
3. Copy Code CSS
4. Cari code ]]></b:skin> dan pastekan code CSS tepat diatasnya
5. Copy Code HTML
6. Paste Code HTML ketempat yang di inginkan ex: diatas header maka carilah script header tsb lalu pastekan tepat diatas script header tsb.