Cara Membuat Menu DropDown Tanpa Edit HTML - Media Impressive

SEO Blogger Cara Membuat Menu DropDown Tanpa Edit HTML

Cara Membuat Menu DropDown Tanpa Edit HTML

Media Impressive Jumat, Oktober 24, 2014

Media Impressive

Kebetulan karena kemarin saya memakai Drop Down Menu di Blog ini, dan kelihatannya lebih bagus dari sebelumnya maka saya akan share Drop Down Menu yang saya pakai ini, siapa tahu bermanfaat. Bagi yang berminat memakai Menu Drop Down seperti yang saya pakai ini silahkan anda copy kode di bawah ini:

Copy : CTRL + C
Paste : CTRL + V

<style>
#menu
{
width: autopx;
margin: 5;
padding: 5px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 20px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 25px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 5px;
height: 5px;
width: autopx;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/' rel='nofollow'>Home</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Dunia-Creative</a>
<ul>
<li><a href='' rel='nofollow' target='_blank'>Dunia-Creative</a></li>
<li><a href='' rel='nofollow' target='_blank'>Dunia-Creative</a></li>
<li><a href='' rel='nofollow' target='_blank'>Dunia-Creative</a></li>
<li><a href='' rel='nofollow' target='_blank'>Dunia-Creative</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='/' rel='nofollow' target='_blank'>Dunia-Creative</a>
<ul>
<li><a href='/' rel='nofollow' target='_blank'>Menu 1</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 2</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 3</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 4</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='' rel='dofollow' target='_blank'>Dunia-Creative</a></li>
</ul>
</li>
</ul>

Tutorial :

Masuk Ke Blogger Anda
Masuk Ke Dasboar / Tata Letak / Add Gadget / Pilih Java HTML / Paste
Lihat Hasilnya

Info Admin Media Impressive

Terima Kasih Sebelumnya Kepada Pembaca Artikel Media Impressive, Bilamana Ada Yang Kurang Mengerti Didalam Artikel Diatas, Tanyakanlah Di Kolom Komentar. Dan Bagi Anda Yang Ingin MengCopy Paste Artikel Media Impressive Diharapkan Menyertakan Sumber.

Related Post

PERATURAN BERKOMENTAR :

√ Berkomentarlah Sesuai Artikel Diatas
√ Berkomentarlah Menggunakan Bahasa Yang Jelas
√ Relevan
√ Sopan
Θ SPAM
Θ Link Aktif (Live Link)
Θ Promosi (Iklan)
Θ OOT (Out Of Topic)

Langganan: Posting Komentar (Atom)

' type='text/javascript'/>