Skip to main content

Cara membuat Menu Drop Down dibawah Header Blog

Pada kesempatan kali ini saya ingin berbagi artikel tentang "Cara membuat Menu Drop Down dibawah Header Blog". Saya mengambil judul tersebut karena mungkin masih ada sebagian sobat blogger yang masih bingung dan masih awam dalam pembuatan Drop Down didalam suatu blog. OK langsung saja silahkan simak ulasan dan tahap-tahapnya berikut ini :

CSS

Letakkan kode CSS berikut tepat di atas ]]</b:skin>
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:#1BC7A5;margin: 5px 0;width: 100%;}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);}

HTML

Letakkan kode berikut tepat di bawah </header>

<nav>
<ul>
<li><a href='/search/label/Tutorial'>Tutorial</a></li>
<li class='sub'><a href='/search/label/Template'>Template</a><ul>
<li><a href='/search/label/CSS3'>CSS3</a></li>
<li><a href='/search/label/HTML5'>HTML5</a></li>
<li><a href='/search/label/Responsive'>Responsive</a></li>
<li><a href='/search/label/SEO'>SEO</a></li>
</ul>
</li>
</ul>
</nav>
Kemudian simpan template anda.

Semoga Artikel tentang  "Cara membuat Menu Drop Down dibawah Header Blog" ini bisa bermanfaat untuk sobat blogger semuanya. salam sukses selalu.. 
jangan lupa tinggal komentar kalian dibawah ini. OK :-)




Baca juga:











































Comments

Popular posts from this blog

Lirik Indal Faji kuntu usolli

Lirik lagu Indal Fajri ***
Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

subhanallaah
manrofaassama
waahsanal bina
subhanallah

subhannalah
faahatidzuhur
biazmalil 'utur
subhanallah

subhanallah
manzada bil hawa
antamuhu jawa
subhanallah

subahanllah
maasmalasuhun
minhosmihatakun
subhanallah

allah allah ....ya allah .....ya allah .....ya allah


Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

subhanallah
kawwanal insan 'allamal bayan subhanallah

subhanallah
yaman wahab dalluh
 hatta nagtu wanaruh
 subhanallah

subhanallah
wal aqla wal janan
wal hubba wal hanan
subhanallah

subhanallah
hamdan syukron lillah
kullu rojabillah
subhanallah

allah.. ya allah... ya allah... ya allah


Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

Tahapan alur novel, cerpen dan drama