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
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; }
<!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>
Design code is edited by. M-2010 in codepen
If you want to directly copy and paste you canDownload Here Menu Drop Down Fixed R