Menu Drop Down styles

Memasang Kode Menu Drop Down styles
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-2px;
  width: 100%;
text-align: center;
font-size:  6px;
background:#483D8B;
border-bottom:1px solid #f0f;
}
.ap {
position: fixed;
right: 0;
bottom:-22px;
left: 0;
height:40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background:  #483D8B;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #9400D3 50%, transparent 90%); 
} 
h3
{box-shadow: 
0 0 200px 3px #24006B; 
}

body {
  background: #47006B;
  color: #fff;
  font: normal 0.9em/1 Geneva, Tahoma, Verdana, sans-serif;
  padding: 1em 0;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  max-width: 978px;
}
.wrapper {
  float: left;
  padding: 2em 0;
  width: 100%;
}
.content {
  float: right;
  line-height: 1.5;
  margin: 0 5%;
  width: 60%;
}
.complementary {
  float: left;
  width: 30%;
}
nav { 
  position: relative;
  float: left;
  width: 100%;
}
nav ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
}
nav > ul > li { 
  float: left; 
  position: relative; 
}
nav ul li a { 
  display: block;
}
nav > ul > li > a {
  float: left;
}
nav ul ul { 
  left: -9999em;
  position: absolute;
  width: 250px;         
  z-index: 2; 
}
nav ul > li:hover > ul { 
  left: 0; 
  top: 100%; 
  background-position: 0 0; 
}
/* ===================
Menu drop down Styles
====================*/
nav ul li li { 
  position: relative; 
}
nav ul ul li:hover ul { 
  left: 100%; 
  top: 0;
}
.side {
  float: none;
}
.side ul > li { 
  clear: both;
  float: none;
  position: relative;
}
.side ul > li > a {
  float: none;
}
.side ul li:hover ul ul { 
  left: -9999px; 
  top: 0; 
}
.side li:hover ul { 
 left: 100%; 
 top:0; 
}
.side li:hover ul li:hover ul {
  left: 100%;
  top: 0;
}

#ie8 nav li { 
  display: inline; 
} 
#ie8 nav li > a { 
  height: auto; 
} 
#ie8 nav li li a { 
  zoom: 1; 
} 

#ie8 li:hover { 
  z-index: 5; 
} 
#ie8 nav li:hover { 
  display: block; 
}

nav {
  background: rgb(32,49,71);
  background: -moz-linear-gradient(top, rgba(32,49,71,1) 0%, rgba(61,97,114,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,49,71,1)), color-stop(100%,rgba(61,97,114,1)));
  background: -webkit-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
  background: -o-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
  background: -ms-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
  background: linear-gradient(to bottom, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203147', endColorstr='#3d6172',GradientType=0 );
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}
nav > ul > li > a { 
  border-right: 1px solid #273444;
  box-shadow: 3px 0 8px rgba(0,0,0,0.25);
  color: #f8f8f8;
  padding: 1.5em 25px;
  text-decoration: none;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
nav ul li:last-child a {
  border: none;
  box-shadow: none;
}
nav > ul > li > a:hover, nav > ul > li > a:focus {
  background: #465A68;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
  color: #f8f8f8; 
}
nav ul ul { 
  background: rgb(70,90,104);
  background: -moz-linear-gradient(top, rgba(70,90,104,1) 0%, rgba(147,163,175,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,90,104,1)), color-stop(100%,rgba(147,163,175,1)));
  background: -webkit-linear-gradient(top, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
  background: -o-linear-gradient(top, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
  background: -ms-linear-gradient(top, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
  background: linear-gradient(to bottom, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#465a68', endColorstr='#93a3af',GradientType=0 );
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
nav ul ul ul {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 0;
}
nav li li a {
  border-bottom: 1px solid #34454C;
  border-top: 1px solid #7A8B8E;
  color: #fff; 
  padding: 0.8em 25px;
  text-decoration: none;
}
nav li li a:hover, nav li li a:focus { 
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.35)));
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
nav li li:first-child a {
  border-top: none;
}
nav li li:last-child a {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
nav li li li:first-child a {
  border-top-right-radius: 5px;
}

nav li li li:last-child a {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 0;
}
/* ===================
Vertical styles
====================*/
.side {
  background: #F99522;
  background: #47006B;
  background: -moz-linear-gradient(top,  #47006B 0%, #6B006B 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,149,34,1)), color-stop(100%,#111;
  background: -webkit-linear-gradient(top,  #47006B 0%,#6B006B 100%);
  background: -o-linear-gradient(top,  rgba(249,149,34,1) 0%,#6B006B 100%);
  background: -ms-linear-gradient(top,  rgba(249,149,34,1) 0%,#6B006B 100%);
  background: linear-gradient(to bottom,  rgba(249,149,34,1) 0%,#6B006B 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B006B', endColorstr='#ef811a',GradientType=0 );
}
.side ul > li > a {
  border: none;
  box-shadow: none;
}
.side > ul > li > a:hover, .side > ul > li > a:focus {
  background: #465A68;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.10)));
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
  color: #f8f8f8;
  text-decoration: underline;
}
.side ul ul {
  background: #F9C94D;
  background: rgb(249,201,77);
  background: -moz-linear-gradient(top,  rgba(249,201,77,1) 0%, rgba(252,223,95,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,201,77,1)), color-stop(100%,rgba(252,223,95,1)));
  background: -webkit-linear-gradient(top,  rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
  background: -o-linear-gradient(top,  rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
  background: -ms-linear-gradient(top,  rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
  background: linear-gradient(to bottom,  rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c94d', endColorstr='#fcdf5f',GradientType=0 );
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.side > ul > li a { 
  border-bottom: 1px solid #EA7507;
  border-top: 1px solid #F2A760;
}
.side > ul > li li a { 
  border-bottom: 1px solid #F4CB24;
  border-top: 1px solid #F7DD74;
  color: #0C3354;
}
.side > ul > li li a:hover, .side > ul > li li a:focus {
  background: #F9D440;
  background: rgb(249,212,64);
  background: -moz-linear-gradient(top,  rgba(249,212,64,1) 0%, rgba(244,188,46,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,212,64,1)), color-stop(100%,rgba(244,188,46,1)));
  background: -webkit-linear-gradient(top,  rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
  background: -o-linear-gradient(top,  rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
  background: -ms-linear-gradient(top,  rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
  background: linear-gradient(to bottom,  rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d440', endColorstr='#f4bc2e',GradientType=0 );
}
.side > ul li:first-child a {
  border-top: none;
}
.side > ul > li:last-child a {
  border-top: 1px solid #F2A760;
}
.side li li:first-child a {
  border-top-right-radius: 5px;
}
.side li li:last-child a {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 0;
}
.side li li li:first-child a {
  border-top-right-radius: 5px;
}
</style> 

<body>
  <div class="container">
    <nav class="main">
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Hover</a>
          <ul>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Hover</a>
              <ul>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
          </ul>
        </li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <div class="wrapper">
      <article class="content">
<p>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>  </p><p>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>  </p>
<p>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>  </p>
<p>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br> Menu Drop Down styles Menu Drop Down styles Menu Drop Down styles<br>  </p>
      </article>
      <aside class="complementary">
        <nav class="side">
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
             <li><a href="#">Link (sub-links)</a>
              <ul>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Hover</a>
                  <ul>
                    <li><a href="#">Sub Link</a></li>
                    <li><a href="#">Sub Link</a></li>
                    <li><a href="#">Sub Link</a></li>
                    <li><a href="#">Sub Link</a></li>
                    <li><a href="#">Sub Link</a></li>
                    <li><a href="#">Sub Link</a></li>
                  </ul>
                </li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
                <li><a href="#">Sub Link</a></li>
              </ul>
            </li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </nav>
      </aside>
    </div>
  </div>
</body>
</html>

<header>
<h2><code>M2010</code></h2>
</header>

<div class="ap" id="ap">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>

 Design code is edited by. M-2010 in codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Menu Drop Down styles

Category: Menu Drop Down styles

Tweet