Menu Drop Down pada Blog

Dalam sebuah blog terdapat menu yang dapat mempermudah pengunjung untuk menggunakan blog yang disediakan oleh para blogger sejati.

berikut merupakan cara membuat menu drop down pada blog:

1. login ke blog anda
2. kemudian masuk ke Template blog dan pilih edit Html
3. kemudian copy perintah CSS berikut ke halaman template sepert pada gambar berikut:

4. berikut script CSS lengkap yang harus di copy:

/*menupd*/

nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}nav ul {overflow: hidden;float:left;background:#EA5546;margin-left:280px;width: 100%;-webkit-box-shadow:0 0 20px #fe0a0a;z-index:100;position:fixed;}nav li {float:left;display:inline;}nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-decoration:none;}nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}nav li li {display:block;float:none;width:100%;}nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}nav li.sub > a {position:relative;padding-right:30px;}nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}nav li li:hover{background:rgba(0, 0, 0, 0.16);}

/*endmenupd*/

5. kemudian cari perintah </head>
6. dan letakan script Html berikut pas di bawah </head>

<nav>
<ul>
<li><a href="http://inteknors.blogspot.com/">Home</a></li>
<li><a href="http://inteknors.blogspot.com/search/label/programer">Programer</a></li>
<li><a href="http://inteknors.blogspot.com/search/label/Teknologi">Teknologi</a></li>
<li><a href="http://inteknors.blogspot.com/search/label/sejarah">Sejarah</a></li>
<li><a href="http://inteknors.blogspot.com/search/label/Kuliah">Kuliah</a></li>
<li><a href="http://inteknors.blogspot.com/search/label/tips%20and%20trik">Tips dan Trik</a></li>
<li><a href="http://inteknors.blogspot.com/search/label/Download">Download</a></li>
</ul>
</nav>

7. Kemudian simpan dan lihat hasilnya
8. berikut hasil yang nampak pada blog saya