Cara Membuat CSS Drop Down Menu

Untuk membuat CSS Drop Down Menu, silahkan sampeyan baca dulu posting tentang "Cara Membuat Horizontal Tabs Menu, karena cara pembuatannya sama persis. KLIK link di bawah ini untuk melihat langkah yang diperlukan :

Click here! Horizontal Tabs Menu

Kode CSS dan Kode HTML CSS Drop Down Menu

<style type="text/css">
.bgsGR_NavHor-1{ 
background: url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlackGrayGradTopV51H1.gif) bottom repeat-x;
position:absolute;
left:34px;
height:42px;
font-size:.9em;z-index:200;
border-right:8px solid #000;border-left:8px solid #000;
border-top-left-radius:8px;border-top-right-radius:8px;
-moz-border-radius-topleft:8px;-moz-border-radius-topright:8px;
-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;
-goog-ms-border-top-left-radius:8px;-goog-ms-border-top-right-radius:8px;
}
.bgsGR_NavHor-1 a{
font-family:Arial Narrow;
font-weight:700;
color:#fff;
text-decoration:none;
}
.bgsGR_NavHor-1 ul{
padding:0px;
margin:0px;
list-style:none;
}
.bgsGR_NavHor-1 li{
float:left;
position:relative;
padding:11px 10px 12px;
text-align:center;
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgGradRedBlackV41H8.gif);
background-repeat:no-repeat;
background-position:top right;
}
.bgsGR_NavHor-1 li a:hover{ 
color:red;
}
.bgsGR_NavHor-1 li.last{
background-image:none;
border-bottom:2px solid red;
}
.bgsGR_NavHor-1 li ul{
display:none;
position:absolute;
top:37px;
left:0px;
padding:0 0 2px 0;
background-color:#333;
}
.bgsGR_NavHor-1 li:hover,.bgsGR_NavHor-1 li.over{
border-top:2px solid red;
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgVertBlueGradV40H30.png);
background-repeat:repeat-x;
}
.bgsGR_NavHor-1 li li:hover,.bgsGR_NavHor-1 li li.over{
background-image:none;
}
.bgsGR_NavHor-1 li.tab_active{
background:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgGradRedBlackV41H8.gif) top repeat-x;
background-position:0 -10px;
font-weight:bold;
}
.bgsGR_NavHor-1 li.tab_active ul{
font-weight:normal;
}
.bgsGR_NavHor-1 li:hover ul,.bgsGR_NavHor-1 li.over ul{
display:block;
}
.bgsGR_NavHor-1 li.tab_active:hover ul,.bgsGR_NavHor-1 li.tab_active:hover ul{
background-color:#1E71C4;
}
.bgsGR_NavHor-1 li ul li,.bgsGR_NavHor-1 li ul li:hover{
width:180px;
padding:0;
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgRasterV42H16.jpg);
background-repeat:repeat-x;
background-position:bottom left;
margin:0px;text-align:left;
}
.bgsGR_NavHor-1 li.tab_active ul li,.bgsGR_NavHor-1 li.tab_active ul li:hover{
background-image:url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlackRedOldH11V34.gif);
}
.bgsGR_NavHor-1 li ul li.last{
background-image:none;
}
.bgsGR_NavHor-1 li.tab_active ul li.last{
background-image:none;
}
.bgsGR_NavHor-1 li ul li div a{
display:block;
padding:6px 12px 8px 12px;
}
.bgsGR_NavHor-1 li.tab_active ul li div a{}.bgsGR_NavHor-1 li ul li div a:hover{
background-color:#2A2A2A;
}
.bgsGR_NavHor-1 li.tab_active ul li div a:hover{
background-color:#468FD7;
}
</style>


<div class="bgsGR_NavHor-1" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
<ul>
<li class="tab_active"><div><a href="Link-1">Nama Link-1</a></div>
<ul>
<li><div><a href="Link-1a">Nama Link-1a</a></div></li>
<li><div><a href="Link-1b">Nama Link-1b</a></div></li>
<li><div><a href="Link-1c">Nama Link-1c</a></div></li>
</ul> 
</li>
<li class="last"><div><a href="Link-2">Nama Link-2</a></div>
<ul>
<li><div><a href="Link-2a">Nama Link-2a</a></div></li>
<li><div><a href="Link-2b">Nama Link-2b</a></div></li>
<li><div><a href="Link-2c">Nama Link-2c</a></div></li>
<li><div><a href="Link-2d">Nama Link-2d</a></div></li>
<li><div><a href="Link-2e">Nama Link-2e</a></div></li>
<li><div><a href="Link-2f">Nama Link-2f</a></div></li>
</ul>
</li>

<li><div><a href="Link-3">Nama Link-3</a></div>
<ul>
<li><div><a href="Link-3a">Nama Link-3a</a></div></li>
<li><div><a href="Link-3b">Nama Link-3b</a></div></li>
<li><div><a href="Link-3c">Nama Link-3c</a></div></li>
<li><div><a href="Link-3d">Nama Link-3d</a></div></li>
</ul>
</li>

<li><div><a href="Link-4">Nama Link-4</a></div>
<ul>
<li><div><a href="Link-4a">Nama Link-4a</a></div></li>
<li><div><a href="Link-4b">Nama Link-4b</a></div></li>
<li><div><a href="Link-4c">Nama Link-4c</a></div></li>
</ul>
</li>

<li><div><a href="Link-5">Nama Link-5</a></div>
<ul>
<li><div><a href="Link-5a">Nama Link-5a</a></div></li>
<li><div><a href="Link-5b">Nama Link-5b</a></div></li>
<li><div><a href="Link-5c">Nama Link-5c</a></div></li>
<li><div><a href="Link-5d">Nama Link-5d</a></div></li>
<li><div><a href="Link-5e">Nama Link-5e</a></div></li>
</ul>
</li>

<li><div><a href="Link-6">Nama Link-6</a></div>
<ul>
<li><div><a href="Link-6a">Nama Link-6a</a></div></li>
<li><div><a href="Link-6b">Nama Link-6b</a></div></li>
<li><div><a href="Link-6c">Nama Link-6c</a></div></li>
<li><div><a href="Link-6d">Nama Link-6d</a></div></li>
<li><div><a href="Link-6e">Nama Link-6e</a></div></li>
<li><div><a href="Link-6f">Nama Link-6f</a></div></li>
<li><div><a href="Link-6g">Nama Link-6g</a></div></li>
<li><div><a href="Link-6h">Nama Link-6h</a></div></li>
<li><div><a href="Link-6i">Nama Link-6i</a></div></li>  
</ul>
</li>

<li><div><a href="Link-7">Nama Link-7</a></div>
<ul>
<li><div><a href="Link-7a">Nama Link-7a</a></div></li>
<li><div><a href="Link-7b">Nama Link-7b</a></div></li>
<li><div><a href="Link-7c">Nama Link-7c</a></div></li>
<li><div><a href="Link-7d">Nama Link-7d</a></div></li>
<li><div><a href="Link-7e">Nama Link-7e</a></div></li>
<li><div><a href="Link-7f">Nama Link-7f</a></div></li>
<li><div><a href="Link-7g">Nama Link-7g</a></div></li>
<li><div><a href="Link-7h">Nama Link-7h</a></div></li>
<li><div><a href="Link-7i">Nama Link-7i</a></div></li>
<li><div><a href="Link-7j">Nama Link-7j</a></div></li>
<li><div><a href="Link-7k">Nama Link-7k</a></div></li>
<li><div><a href="Link-7l">Nama Link-7l</a></div></li>
<li><div><a href="Link-7m">Nama Link-7m</a></div></li>
<li><div><a href="Link-7n">Nama Link-7n</a></div></li>  
</ul>
</li>

<li><div><a href="Link-8">Nama Link-8</a></div>
<ul>
<li><div><a href="Link-8a">Nama Link-8a</a></div></li>
<li><div><a href="Link-8b">Nama Link-8b</a></div></li>
<li><div><a href="Link-8c">Nama Link-8c</a></div></li>
<li><div><a href="Link-8d">Nama Link-8d</a></div></li>
<li><div><a href="Link-8e">Nama Link-8e</a></div></li>
<li><div><a href="Link-8f">Nama Link-8f</a></div></li>
<li><div><a href="Link-8g">Nama Link-8g</a></div></li>
<li><div><a href="Link-8h">Nama Link-8h</a></div></li>
<li><div><a href="Link-8i">Nama Link-8i</a></div></li>  
</ul>
</li>

</ul>
</div>

Atur margin pada kode :

<div class="bgsGR_NavHor-1" style="top:-30px;left:10px;margin: -0px 10px 20px 0px;">

- top:-30px; digunakan untuk mengator jarak dari ujung atas blog (navbar). Nilai bisa diperbesar atau diperkecil, dimana minus semakin besar maka akan semakin naik.
- left:10px; merupakan jarak dari sebelah kiri.
- pengaturan lanjutan dilakukan melalui margin:0px 10px 20px 0px; dimana 0 = jarak atas, 10px = dari kanan, 20px = dari bawah dan 0px = dari kiri.
Untuk pemasangan di bawah header blog juga dilakukan dengan mengatur variabel di atas. Untuk jumlah menu silahkan di atur hingga tidak lebih lebar dari halaman blog.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «