Drop Down Menu Html Code 2 Coloums

Nah, setelah posting sebelumnya bahas membuat menu drop down vertical 1 coloum di mari kita membuat dengan dua kolom.
Sebelumnya kita lihat kembali kode html tuk single coloum

---

<style>
#pcm{display:none;}

ul.pureCssMenu ul{display:none}

ul.pureCssMenu li:hover>ul{display:block}

ul.pureCssMenu ul{position: absolute;left:98%;top:-1px;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}

ul.pureCssMenu,ul.pureCssMenu ul {

    margin:0px;

    list-style:none;

    padding:0px 1px 1px 0px;

    background-color:#308321;

    background-repeat:repeat;

    border-color:;

    border-width:0px;

    border-style:solid;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

    display:block;

    zoom:1;

    _width:131.25px;

    float: left;

}

ul.pureCssMenu ul{

    width:0px;

}

ul.pureCssMenu li{

    display:block;

    margin:1px 0px 0px 1px;

    font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

    display:block;

    vertical-align:middle;

    zoom:1;

    background-color:#91FF09;

    border-width:0px;

    border-color:#E4E1DE;

    border-style:solid;

    text-align:left;

    text-decoration:none;

    padding:4px;

    _padding-left:0;

    font:normal 11px Tahoma;

    color: #305429;

    text-decoration:none;

    cursor:default;

}

ul.pureCssMenu span{

    overflow:hidden;

}

ul.pureCssMenu ul li {

    float:none;

}

ul.pureCssMenu ul a {

    text-align:left;

    white-space:nowrap;

}

ul.pureCssMenu li.sep{

    text-align:left;

    padding:0px;

    line-height:0;

}

ul.pureCssMenu li.sep span{

    float:none;    padding-right:0;

    width:100%;

    height:3;

    display:inline-block;

    background-color:;    background-image:none;}

ul.pureCssMenu li:hover{

    position:relative;

}

ul.pureCssMenu li:hover>a{

    background-color:#47723F;

    border-color:#FFFFFF;

    border-style:solid;

    font:normal 11px Tahoma;

    color: #FFFFFF;

    text-decoration:none;

}

ul.pureCssMenu li a:hover{

    position:relative;

    background-color:#47723F;

    border-color:#FFFFFF;

    border-style:solid;

    font:normal 11px Tahoma;

    color: #FFFFFF;

    text-decoration:none;

}

ul.pureCssMenu li.dis a {

    color: #AAAAAA !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;

height:24px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def{display:none}

ul.pureCssMenu span{

    display:block;

    background-image:url(./images/arrow_sub5.gif);

    background-position:right center;

    background-repeat: no-repeat;

   padding-right:12px;}

ul.pureCssMenu li:hover>a>span{    background-image:url(./images/arrow_main4.gif);

}

ul.pureCssMenu a:hover span{    _background-image:url(./images/arrow_main4.gif)}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)}

ul.pureCssMenu ul li:hover > a span{    background-image:url(./images/arrow_main4.gif);}
</style>

<br />
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Tentang Kami</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Kamera Digital</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Flash (Memory) Card</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Baterai &amp; Charger</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Sistem Transaksi</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">FeedBack &amp; Testimoni</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Service &amp; Perbaikan</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Tips &amp; Trik</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">FAQ</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Documentasi</a></li>
</ul>

Untk menambahkan submenu diperlukan perubahan pada bagian-bagian berikut :

Pertama,

dari yang awalnya kayak gini
}

ul.pureCssMenu ul{

    width:0px;
diubah widthnya menjadi seperti ini (atur sesuai kebutuhan)
}

ul.pureCssMenu ul{
    width:148.05px;

Kedua,

ubah kode
ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def{display:none}
menjadi
ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}

Ketiga,

tambahkan kode dibawah baris ketiga. Biar enak lihat bawah
ul.pureCssMenu a:hover span{    _background-image:url(./images/arrow_main4.gif)}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)}

ul.pureCssMenu ul li:hover > a span{    background-image:url(./images/arrow_main4.gif);}
mejadi
l.pureCssMenu a:hover span{    _background-image:url(./images/arrow_main4.gif)}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)}

ul.pureCssMenu ul li:hover > a span{    background-image:url(./images/arrow_main4.gif);}

ul.pureCssMenu table a:hover span{background-image:url(./images/arrow_main4.gif)}

Keempat, 

sedangkan untuk submenus tinggal taruh di bawah menu utama. Contoh pada menu kamera digital kan kita tambahin subbagian yaitu kamera baru dan kamera second. Yang awalnya kodenya kayak di bawah
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Kamera Digital</a></li>
menjadi
<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Kamera Digital</a>

    <ul class="pureCssMenum">

<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Kamera Digital Baru</a></li>

<li class="pureCssMenui"><a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">Kamera Digital Second</a></li>

</ul>

</li>

Sedangkan untuk menaruh link tinggal ganti (misal)

<a class="pureCssMenui" href="http://draft.blogger.com/blogger.g?blogID=6238952949093134052#">FAQ</a>


dengan http link yang agan inginkan. Detailnya coba baca postingan sebelumnya. Selamat mencoba. Bagi yang baru ketemu postingan ini, alangkah baikknya baca postingan seblumnya. Thanks