Menu Drop Down Fixed Responsip

Memasang  Menu Drop Down Fixed Responsip
Login ke akun blog klik tataletak dan klik tambah gadged, copy code dibawah ini :
pastekan kedalam gadged tersebut. Klik Pratinjau untuk melihat hasil, dan klik simpan selesai

<style>
#menudropdownstylefixed 
{position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menudropdownstylefixed 
{margin:0 auto; text-align:left;position:relative; height:50px; 
z-index:999; background:#B20000; -moz-perspective: 100px; 
-webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; }

body {
  background: #47006B;
  color: #fff;
  font: normal 0.9em/1 Geneva, Tahoma, Verdana, sans-serif;
  padding: 1em 0;
}
a {
font-size:13px;
color: #FF3300;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
} 
a:hover {
font-size:13px;
color:#FF9D5B;
font-family: Tahoma, Verdana, sans-serif;
text-decoration: none;
}
box{
  -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 Fixed
----------------------------------*/
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:#eeeeee;
  padding: 1.3em 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 );
text-hover {color:menu;}
  color: #660099; 
}
nav ul ul {  
background: -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
background: linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0));
background: #000000 -webkit-linear-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
background: #000000 linear-gradient(to top left,rgba(204,0,0,1),rgba(204,0,0,0));
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;
}
text-hover {color:down;}
nav li li a {
  border-bottom: 1px solid #34454C;
  border-top: 1px solid #7A8B8E;
  color: #9370DB; 
  padding: 0.8em 25px;
  text-decoration: none;
}
nav li li a:hover, nav li li a:focus { 
background: #000000 -webkit-radial-gradient(bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
background: #000000 radial-gradient(at bottom right,rgba(204,0,0,1),rgba(204,0,0,0));
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;
}
</style> 

<!doctype html>
<!--[if IE8]><html id="ie8"><![endif]-->
<!--[if IE 9]><html id="ie9"><![endif]-->
<!--[if gt IE 9]><!--><!--<![endif]-->
<div id='menudropdownstylefixed'>
<div class='menudropdownstylefixed'>
<div class="container">
<nav class="main">
<ul>
<li><a href="#">&#10086;</a></li>
<li><a href="#">BERANDA</a></li>
<li><a href="#">MENU : 1</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><a href="#">MENU : 2</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><a href="#">MENU : 3</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><a href="#">MENU : 4</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><a href="#">MENU : 5</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="#">FOLLOW</a></li>
<li><a href="#">&#10086;</a></li>
</ul>
</nav>
</div>
</div>

<!!..ending to class='menudropdownstylefixed'..!!>
</!!..ending></div>
<!!..edited by. myscript2010'..!!>
<!!..Copyright @-2017. Cibeber Cimahi'..!!>
<!!..ending to id='menudropdownstylefixed'..!!>
</!!..ending></!!..edited></!doctype>

 Design code is edited by. M-2010 in codepen

FULL SCREEN

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