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
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="#">❦</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="#">❦</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>
If you want to directly copy and paste you canDownload Here Menu Drop Down Fixed R
Copy kode dibawah ini
