Cara buat menu menggunakan css html

Hari ini aku mencoba menambah elemen dalam template blogger klasik yang aku pakai. Dari awalnya, template ini begitu simple. Ga ada fasilitas menu, social blogging, dan pernak-pernik lainnya. Ok, pertama aku mau menambah elemen atau widget menu ke dalam template. Tentu saja yang manual menggunakan html, karena template ini belum diupgrade ke xhtml menurut Google.
Langsung saja seperti biasa aku browsing, dengan kata kunci: "html menu". Pertama aku masuk ke http://stackoverflow.com/.../how-can-i-create-a-hori... dengan title:"How can I create a horizontal HTML menu with a vertical submenu ..." karena aku memang menginginkan tampilan menu horisontal dengan sub menu ke bawah. Tapi ternyata cuma berisi pertanyaan dan jawaban yang tidak memuaskan.
Akhirnya berlanjut ke http://deluxe-menu.com yang mempunyai suguhan bermacam-macam jenis pilihan tampilan menu. Dari CSS hingga script java atau ajax bisa kamu temui disitu.
Dan memang banyak tampilan menu yang memikat hati ada disitu, akhirnya dengan kesabaran aku bisa mengaplikasikan code html yang aku pilih ke blog-ku ini.
Seperti yang bisa kamu lihat di atas header blog ini.
Karena sebetulnya semua kode yang berada disana tidak untuk blog, jadi aku modifikasi sedikit.
Kalau kamu lagi butuh silahkan ke tkp atau boleh memakai sharing-ku disini.

Copy paste-kan kode berikut ke didalam Css kamu

Css Html:

ul#blue-orange-menu div{display:none}
ul#blue-orange-menu li:hover>*{display:block}
ul#blue-orange-menu li:hover{position:relative;}
ul#blue-orange-menu div{
position: absolute;left:-1px;top:98%;}
ul#blue-orange-menu ul div{
position: absolute;left:98%;top:-2px;}
ul#blue-orange-menu,ul#blue-orange-menu ul{
margin:0px;list-style:none;padding:0px;background-color:transparent;border-width:0px;border-style:solid;border-color:#C0AF62;}
ul#blue-orange-menu div{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjW_gkkE1255JWG-g4OeUDnr-ixchGkvV-RkNXud0m_0yf0rF84-uFvmh_gkF7UdSeg-Wdi-LWBWnVVxsvWN_lw5v-lWJ352EDOOK32qd8p1wTNwmxG8LGcWKfKt2moocE38YUVNCyuM3/s1600/sub.png);position:absolute;top:75%;left:-1px;}
ul#blue-orange-menu h1,ul#blue-orange-menu h2{
margin:0;font-size:0;position:absolute;width:10px;height:10px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjW_gkkE1255JWG-g4OeUDnr-ixchGkvV-RkNXud0m_0yf0rF84-uFvmh_gkF7UdSeg-Wdi-LWBWnVVxsvWN_lw5v-lWJ352EDOOK32qd8p1wTNwmxG8LGcWKfKt2moocE38YUVNCyuM3/s1600/sub.png);}
ul#blue-orange-menu h1{
left:100%;top:0;background-position:100% 0;}
ul#blue-orange-menu h2{
left:0;top:100%;background-position:0 100%;}
ul#blue-orange-menu {
display:block;font-size:0;zoom:1;width:545px;float: left;}
ul#blue-orange-menu ul{
//width:139px;position:relative;left:10px;top:10px;border:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjW_gkkE1255JWG-g4OeUDnr-ixchGkvV-RkNXud0m_0yf0rF84-uFvmh_gkF7UdSeg-Wdi-LWBWnVVxsvWN_lw5v-lWJ352EDOOK32qd8p1wTNwmxG8LGcWKfKt2moocE38YUVNCyuM3/s1600/sub.png);background-position:100% 100%;padding:0 10px 10px 0;}
ul#blue-orange-menu li{
display:block;zoom:1;margin:0 6px 0 0;font-size:0;float:left;}
ul#blue-orange-menu li{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESEYlXsG8E7QErhG2uFrSlqEs0Z4D-XQ_YBFSA-8i5j9r-ym4DzSIYIaWIOlwg04jYTxmxzQqNtzB6MuGYWMwGkCPP5405zT9ySnMpFynZqZQ_3LhMlK0IeO-NeuWJKbN9UmAqDakj4Hg/s1600/blank.gif);background-repeat:repeat-x;}
ul#blue-orange-menu li:hover{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9bQWh2hU6VFKcrvwKlJ_dMdoClVgPNG8MpOkZrKiRtabNHDC0CqpLJeYt4WKgbRLH7oqARaKIUBeXWEgC084D1_cIoT6WLSiLm6WU98Iyx6YJrq78WWj0IK5EUoh-2oQhAIkkFPCGcLX/s1600/hlight.png);background-repeat:repeat-x;}
ul#blue-orange-menu a:active, ul#blue-orange-menu a:focus {outline-style:none}
ul#blue-orange-menu a{
display:block;vertical-align:middle;zoom:1;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESEYlXsG8E7QErhG2uFrSlqEs0Z4D-XQ_YBFSA-8i5j9r-ym4DzSIYIaWIOlwg04jYTxmxzQqNtzB6MuGYWMwGkCPP5405zT9ySnMpFynZqZQ_3LhMlK0IeO-NeuWJKbN9UmAqDakj4Hg/s1600/blank.gif);border-width:0px;border-style:none;border-color:#FCEEB0;text-align:center;text-decoration:none;padding:14px 29px 0px 20px;font:normal 11px Trebuchet MS,Arial,san-serif;color: #043454;text-decoration:none;cursor:pointer;background-position:100% 0;background-repeat:repeat-x;margin:0 -6px 0 6px;}
ul#blue-orange-menu ul li {float:none;}
ul#blue-orange-menu ul a{
text-align:left;white-space:nowrap;}
ul#blue-orange-menu li:hover>a{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9bQWh2hU6VFKcrvwKlJ_dMdoClVgPNG8MpOkZrKiRtabNHDC0CqpLJeYt4WKgbRLH7oqARaKIUBeXWEgC084D1_cIoT6WLSiLm6WU98Iyx6YJrq78WWj0IK5EUoh-2oQhAIkkFPCGcLX/s1600/hlight.png);border-color:#4C99AB;border-style:none;font:normal 11px Trebuchet MS,Arial,san-serif;color: #FFFFFF;text-decoration:none;}
ul#blue-orange-menu img{
border: none;vertical-align: middle;margin-right:0px;}
ul#blue-orange-menu img.over{display:none}
ul#blue-orange-menu li:hover > a img.def {display:none}
ul#blue-orange-menu li:hover > a img.over {display:inline}
ul#blue-orange-menu ul span{background-image:none;padding-right:0px;}
ul#blue-orange-menu li.istylei0>a{
height:46px;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGmAKnBPw11XhTIqEYkJpecV7IBU5e_OmOPYKLcROQAkXsgKdtPcV9G98XSS6wu70TA-tZm9jiZUgqKE6jF9Vr0ZKnMiePZckAw7sYer5eAt4wBe8yZRtuuly9eIbGI8N9RdbqTCb1JeZ/s1600/back-left-normal.png);border-width:0px;border-style:none;font:bold 11px Trebuchet MS,Arial,san-serif;color:#FFFFFF;text-decoration:none;margin:0 -10px 0 10px;background-position:100% 0;}
ul#blue-orange-menu li.istylei0:hover>a{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhydRb0yYFlaFXr8CRyXa6taGlV0h-Zflc-sDqx86RThy75NVfVn23AChcjnPIdd2Nih2hPBQNhotjeeO732o81N4Q59l9yUsHFnjSaEtBD3yPRQkBHwWDcN3HYexsixyKRGfHNSWM29BPe/s1600/back-left-over.png);border-style:none;font:bold 11px Trebuchet MS,Arial,san-serif;color:#043454;text-decoration:none;}
ul#blue-orange-menu li.istylei0{
margin:0 10px 0 0;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGmAKnBPw11XhTIqEYkJpecV7IBU5e_OmOPYKLcROQAkXsgKdtPcV9G98XSS6wu70TA-tZm9jiZUgqKE6jF9Vr0ZKnMiePZckAw7sYer5eAt4wBe8yZRtuuly9eIbGI8N9RdbqTCb1JeZ/s1600/back-left-normal.png);background-position:0 0;}
ul#blue-orange-menu li.istylei0:hover{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhydRb0yYFlaFXr8CRyXa6taGlV0h-Zflc-sDqx86RThy75NVfVn23AChcjnPIdd2Nih2hPBQNhotjeeO732o81N4Q59l9yUsHFnjSaEtBD3yPRQkBHwWDcN3HYexsixyKRGfHNSWM29BPe/s1600/back-left-over.png);}
ul#blue-orange-menu li.istylei2>a{
height:46px;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgppEX9C5sb7_C9Au1d2DvbiPj4Ms1kIKNp-yYvKUX8SHlvEs1JmXDYsinVJkkEmV2GqJja0tuzILFBTkw-9gvAihnuVzF3HT83QNNHTHbcTrcTO8mQF0oHXBx9G-TEESPb_9RBmNsYN8x9/s1600/back-center-normal.png);border-width:0px;border-style:none;font:bold 11px Trebuchet MS,Arial,san-serif;color:#FFFFFF;text-decoration:none;margin:0 -10px 0 10px;background-position:100% 0;}
ul#blue-orange-menu li.istylei2:hover>a{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAQosR313_CjbKJvp6U62q3V1cnlVJUFDolrJ73qnTpnR3Cw5K-NxmrZ8nDzvhIES4EpZMR0O8hx5nsndoqIc-p3uI8x8sjoDOxG0nlnlP26Uwj1m5svXR4bswOSrybqmkuP5avQGFSf4/s1600/back-center-over.png);border-style:none;font:bold 11px Trebuchet MS,Arial,san-serif;color:#043454;text-decoration:none;}
ul#blue-orange-menu li.istylei2{
margin:0 10px 0 0;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgppEX9C5sb7_C9Au1d2DvbiPj4Ms1kIKNp-yYvKUX8SHlvEs1JmXDYsinVJkkEmV2GqJja0tuzILFBTkw-9gvAihnuVzF3HT83QNNHTHbcTrcTO8mQF0oHXBx9G-TEESPb_9RBmNsYN8x9/s1600/back-center-normal.png);background-position:0 0;}
ul#blue-orange-menu li.istylei2:hover{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAQosR313_CjbKJvp6U62q3V1cnlVJUFDolrJ73qnTpnR3Cw5K-NxmrZ8nDzvhIES4EpZMR0O8hx5nsndoqIc-p3uI8x8sjoDOxG0nlnlP26Uwj1m5svXR4bswOSrybqmkuP5avQGFSf4/s1600/back-center-over.png);}
ul#blue-orange-menu li.istylei1>a{
height:46px;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivrS9TYkNJ1u0t8jd-ykT1i-fYECnzqvbMjbtYOkCnXZpVZ1XUGVdonKUo-4TCIbIXyW5ftNAzvolxfSGIck1if4jRbUb33X9juYQ_9RHzCRPV0qOPr6D6wrG14o6zA4s6q8zfuT6wZwy2/s1600/back-right-normal.png);border-width:0px;border-style:none;font:bold 11px Trebuchet MS,Arial,san-serif;color:#FFFFFF;text-decoration:none;margin:0 -10px 0 10px;background-position:100% 0;}
ul#blue-orange-menu li.istylei1:hover>a{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMC5ebZPr_n6NzDguNFqTAtziM8FOxi5OMscPefY9gQhVSmJ255qEmvWqqzNKFNTeLlMB3TyY0hG4XU3lB1M45NFo3SltvP4_h4hIMgiWdh8f8dzPBCozH6sobrlN7KyM2hXeqncbYNI5b/s1600/back-right-over.png);border-style:none;font:bold 11px Trebuchet MS,Arial,san-serif;color:#043454;text-decoration:none;}
ul#blue-orange-menu li.istylei1{
margin:0 10px 0 0;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivrS9TYkNJ1u0t8jd-ykT1i-fYECnzqvbMjbtYOkCnXZpVZ1XUGVdonKUo-4TCIbIXyW5ftNAzvolxfSGIck1if4jRbUb33X9juYQ_9RHzCRPV0qOPr6D6wrG14o6zA4s6q8zfuT6wZwy2/s1600/back-right-normal.png);background-position:0 0;}
ul#blue-orange-menu li.istylei1:hover{
background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMC5ebZPr_n6NzDguNFqTAtziM8FOxi5OMscPefY9gQhVSmJ255qEmvWqqzNKFNTeLlMB3TyY0hG4XU3lB1M45NFo3SltvP4_h4hIMgiWdh8f8dzPBCozH6sobrlN7KyM2hXeqncbYNI5b/s1600/back-right-over.png);}
ul#blue-orange-menu.istylem0,ul#blue-orange-menu ul.istylem0{
background-color:transparent;border-width:0px;border-style:none;padding:2px 12px 10px 2px;}
ul#blue-orange-menu ul.istylem0>li{
margin:0 0 2px;}
ul#blue-orange-menu.istylem0>li>a,ul#blue-orange-menu ul.istylem0>li>a{
padding:4px 10px 4px 0px;}

Kemudian di dalam body template masukkan kode html berikut

Html Body:

<ul id="blue-orange-menu">
<li class="istylei0"><a href="#">Home</a></li>
<li class="istylei2"><a href="#"><span>Sample1</span></a>
<div><h1></h1><h2></h2><ul class="istylem0" style="width:125px;">
<li><a href="#">Sub-Sample1</a></li>
<li><a href="#"><span>Sub-Sample2</span></a>
<div><h1></h1><h2></h2><ul class="istylem0" style="width:121px;">
<li><a href="#">Sub-sub-Sample1</a></li>
<li><a href="#">Sub-Sub-Sample2</a></li>
<li><a href="#">Sub-Sub-Sample3</a></li>
</ul></div>
</li>
<li><a href="#">Sub-Sample3</a></li>
<li><a href="#">Sub-Sample4</a></li>
</ul></div>
</li>
<li class="istylei2"><a href="#"><span>Sample2</span></a>
<div><h1></h1><h2></h2><ul class="istylem0" style="width:145px;">
<li><a href="#">Sub-sub-Sample1</a></li>
<li><a href="#">Sub-Sub-Sample2</a></li>
<li><a href="#">Sub-Sub-Sample3</a></li>
</ul></div>
</li>
<li class="istylei1"><a href="mailto:#">Contact Me</a></li>
</ul>