langkah-langkah di bawah ini tapi sebelum itu sobat bisa lihat 2 gambar di bawah ini
GAMBAR 1 Menu Droupdown Full Color yang belom tersentuh mous pada halaman Div nya
Silakan lihat demonya di linik bawah sobat
<style>
/*Droupdown menu Full Color
Original : Desain Selladrt
Website : By Url www.bloggertutoria.com
----------------------------------------------- */
#menusoto {height:423px; width:136px; position:fixed;_position:absolute;bottom:80px;
left:0px; clip:inherit;
(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression
(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
;
height:auto;
width:auto;}
#menusoto ul {margin:0px; padding:0px; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0px 1px; }
#menusoto li {margin:0px; padding:0px; list-style:none; border-color:#FFFFFF; border-bottom-width:5px; }
#menusoto li {display:inline-block; display:inline;}
#menusoto ul ul {position:absolute; left:-9999px;}
#menusoto ul#toplevel {position:absolute; left:0px; top:-1px; width: 136px;}
#sectionone a{background-color:#CC0000; }
#sectionone a:hover{background-color: #000066; }
#toplevel li a{ font-weight:bold; margin-bottom:4px;/*Original : Desain Selladrt*/ padding:0px 8px 0px 5px;
/*border-bottom-style:solid; border-bottom-width:5px; border-bottom-color:#FFFFFF;*/
border:solid 1px #636363;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;}
#menusoto a {display:block; font:normal 12px verdana,arial,sans-serif;/*Original : Desain Selladrt*/ color:#000000; line-height:29px;
text-decoration:none; padding:0px 10px 0px 10px;}
#menusoto ul li:hover > ul {left:100%; margin-top:/*Original : Desain Selladrt*/-36px; margin-left:-1px;width:1125px; background: #00ff00;}
#menusoto a:hover ul,
#menusoto a:hover a:hover ul,
#menusoto a:hover a:hover a:hover ul {left:100%; background:#F1F1F1;}
#menusoto a:hover ul ul,
#menusoto a:hover a:hover ul ul {left:-9999px;}
#menusoto li a:hover {background:#FF7777; color:#333333;}
#menusoto li:hover > a {background:#FF7777; color:#fff; line-height:29px;}
#menusoto li a.expand:hover {background:#FF5700; }
#menusoto li a.expand1 {background-color: #ff7800;}
#menusoto li a.expand1:hover {background: #FF5700;}
#menusoto li a.expand1a {background-color: #FFBB80;}
#menusoto li a.expand1a:/*Original : Desain Selladrt*/hover {background: #ff7800;}
#menusoto li a.expand1b {background-color: #FED4B0;}
#menusoto li a.expand1b:hover {background: #FF9D45;}
#menusoto li a.expand1c {background-color: #FF9333;}
#menusoto li a.expand1c:hover {background: #FF9D45;}
#menusoto li a.expand2 {background-color: #ffaa23;}
#menusoto li a.expand2:hover {background: #FD8C14;}
#menusoto li a.expand2a {background-color: #FFCC7A;}
#menusoto li a.expand2a:hover {background: #FF7800;}
#menusoto li a.expand3 {background-color: #fed00c;}
#menusoto li a.expand3:hover {background: #FCBC04;}
#menusoto li a.expand4 {background-color: #F6FF37;}
#menusoto li a.expand4:hover {background: #EDFF00; color:#999999;}
#menusoto li a.expand5 {background-color: #89FF2A;}
#menusoto li a.expand5:hover {background: #32FD0C;}
#menusoto li a.expand6 {background-color: #00f07c;}
#menusoto li a.expand6:hover {background: #00E253;}
#menusoto li a.expand7 {background-color: #00beed;}
#menusoto li a.expand7:hover {background: #00A5E7;}
#menusoto li a.expand8 {background-color: #007af3;}
#menusoto li a.expand8:hover {background: #0058ED; }
#menusoto li a.expand9 {background-color: #be5fed;}
#menusoto li a.expand9:hover {background: #A240E2; }
#menusoto li a.expand10 {background-color: #a810ff;}
#menusoto li a.expand10:hover {background: #8B08FF; }
#menusoto li a.expand11 {background-color: #ee00c6;}
#menusoto li a.expand11:hover {background: #DB03A5; }
#menusoto li a.expand12 {background-color: #ee005a;}
#menusoto li a.expand12:hover {background: #E0003B; }
#menusoto li:hover > a.expand {background:#FF0000;}
#menusoto table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px;
margin-left:-1px;}
ul { margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #333333;
font-weight:bold; line-height:23px; }
</style>
Kedua Copy Kode Div Html nya di bawah pastekan pasdi Atas Kode </body> atau <body> yang kedue
<div id="menusoto">
<ul id="toplevel">
<li><a class="expand1" href="http://www.bloggertutoria.com/">PALAWIJA
</a>
<ul>
<li><a class="expand2" href="http://www.bloggertutoria.com/">BAWANG HITAM</a></li>
<li><a class="expand3" href="http://www.bloggertutoria.com/">BAWANG MERAH</a></li>
<li><a class="expand4" href="http://www.bloggertutoria.com/">BAWAH PUTIH</a></li>
<li><a class="expand5" href="http://www.bloggertutoria.com/">BAWAH BOMBAI</a></li>
<li><a class="expand6" href="http://www.bloggertutoria.com/">CABE RAWIT</a></li>
<li><a class="expand7" href="http://www.bloggertutoria.com/">CABE MERAH</a></li>
<li><a class="expand2" href="http://www.bloggertutoria.com/">WORTEL</a></li>
<li><a class="expand3" href="http://www.bloggertutoria.com/">KENTANG</a></li>
<li><a class="expand4" href="http://www.bloggertutoria.com/">KANGKUNG</a></li>
<li><a class="expand5" href="http://www.bloggertutoria.com/">BAYAM</a></li>
<li><a class="expand6" href="http://www.bloggertutoria.com/">TERONG</a></li>
<li><a class="expand7" href="http://www.bloggertutoria.com/">JENGKOL</a></li>
<li><a class="expand6" href="http://www.bloggertutoria.com/">PETAI</a></li>
<li><a class="expand7" href="http://www.bloggertutoria.com/">GUBIS</a></li>
<ul></ul></ul></li>
<li><a class="expand2" href="http://www.bloggertutoria.com/">SATE WEDUS</a></li>
<li><a class="expand3" href="http://www.bloggertutoria.com/">NASIH GORENG</a></li>
<li><a class="expand4" href="http://www.bloggertutoria.com/">MIE REBUS</a></li>
<li><a class="expand5" href="http://www.bloggertutoria.com/">MIE GORENG</a></li>
<li><a class="expand6" href="http://www.bloggertutoria.com/">NASIH UDUK</a></li>
<li><a class="expand7" href="http://www.bloggertutoria.com/">NASIH BUNGKUS</a></li>
<li><a class="expand8" href="http://www.bloggertutoria.com/">ES SUSU</a></li>
<li><a class="expand9" href="http://www.bloggertutoria.com/">KOPI</a></li>
<li><a class="expand10" href="http://www.bloggertutoria.com/">KOPI SUSU</a></li>
<li><a class="expand11" href="http://www.bloggertutoria.com/">Site Map</a></li>
<li><a class="expand12" href="http://www.bloggertutoria.com/">Home</a></li>
</ul>
</div>
Silakan di Acak-Acak biar pas dengan keinginan sobat semuah dan pas di selera sobat semuah
sekian dulu dari kami semoga postingan ini bisa membantu buat sobat yang membutuhkanya Amin........?
{ 13 comentários... read them below or Comment }
1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
Kayaknya oke nih mas .. :D
BalasHapushihi kolor ijo juga ada ternyata
BalasHapuseeemmm...suka, tapi nanti tak tertutup entri yg ada?
BalasHapushu`uh entry tertutup :D
Hapusselamat pagi mas...kalau WS praktek tutorialnya nanti aja, sekarang mau nganterin kopi aja dulu, soalnya kalau udah puasa ga bisa nganter kopi lagi kesini hehehe
BalasHapusmantap mas saya coba dulu di blog lain
BalasHapusajibb ommm
BalasHapuswah masikn top aja nih sob :D
BalasHapusngopi dulu ah disini :D
wah jadi penuh warna ya mas, keren, maaf baru mampir mas
BalasHapuskeren gan ..maksudnya apa ya setiap aku masuk sini aku masuk sini ada tulisan 1 admin 13 admin 15 admin dll itu maksudnya apa
BalasHapusoh itu pemberitauan kalu ada komentar masuk. misalkan ada lima komentar yang masuk akan tampil seperti itu sob. jadi tau kalu kita lagi di tempat temen tau kalu ada tmn2 yng kmntr di tmpt aq gitu genk heheh..
Hapuswuihh.,
BalasHapuskeren banget gan.,
kapan2 ane coba juga ah.,
nih mulangi gelas kopi kemarin,.
wkwkkwkwk :D
tutrial yang menarik :)
BalasHapus