Membuat Simple Drop Down Menu dengan CSS

Diposting oleh Sunar Kamis, 06 Oktober 2011

Alhamdulillah bisa kembali online dan berbagi tips dan trik blogging lagi kepada teman-teman setelah beberapa pekan fakum. Tentu kefakuman ini bukan karena banyaknya kesibukan offline yang menyita waktu tapi tidak lebih karena keterbatasan dan sedikit problem pada sarana yang selama ini setia membantu aktifitas online saya. Melalui kesempatan ini pula saya memohon maaf kepada teman-teman blogger dan pengunjung setia blog ini atas segala hak yang tidak bisa saya penuhi selama masa offline, seperti saling kunjung atau blogwalking ke 'rumah maya' teman-teman.
Untuk postingan perdana setelah masa fakum kemarin, insyaAllah kali ini saya hanya ingin mengetengahkan tutorial blogger yang mudah, kalau sebelumnya saya pernah posting tutorial cara membuat multi level drop down menu dengan JQuery maka postingan kali ini bagaimana membuat simple drop down menu dengan CSS.
Langsung pada tutorial
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag ]]></b:skin>:

#pad {height:100px;}
#menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }
#menuHolder {position:relative; float:left; left:50%;}
#menu,
#menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://sites.google.com/site/amatullah83/background/trans.gif); position:relative; z-index:100;}
#menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}
#menu ul {position:absolute; left:-9999px; top:-9999px;}
#menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#menu li {float:left;}
#menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://sites.google.com/site/amatullah83/background/button1a.gif) no-repeat right top;}
#menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li a b {display:block; float:left; height:40px; background:url(http://sites.google.com/site/amatullah83/background/button1.gif) left top; padding:0 0 0 20px; cursor:pointer;}
#menu li:hover {position:relative; z-index:100;}
#menu a:hover {position:relative; z-index:100; color:#fc0;}
#menu a.sub:hover {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
#menu li:hover > a {color:#fc0;}
#menu li:hover > a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3.gif) no-repeat right top;}
#menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
#menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
#menu :hover ul li a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat right center;}
#menu :hover ul li a:hover {color:#fc0;}
#menu :hover ul li a:hover.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul li:hover > a {color:#fc0;}
#menu :hover ul li:hover > a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;}
#menu :hover ul :hover ul {left:117px; top:0; padding:0;}
#menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;}
#menu :hover ul :hover ul li a:hover {color:#fff;}

3. Tambahkan kode HTML berikut dibawah atau diatas <div id='header-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id="menuPositioner">
<div id="menuHolder">
<ul id="menu">
    <li><a href="index.html"><b>Home</b></a></li>
    <li><a href="single.html"><b>Single Level</b></a></li>
    <li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b></a>
    
        <ul class="sub1">
            <li><a class="fly" href="#url">Dropdown one</a>
            
                <ul class="fly1">
                    <li><a href="#url">Dropdown 1.1</a></li>
                    <li><a href="#url">Dropdown 1.2</a></li>
                    <li><a href="#url">Dropdown 1.3</a></li>
                    <li><a href="#url">Dropdown 1.4</a></li>
                    <li><a href="#url">Dropdown 1.5</a></li>
                    <li><a href="#url">Dropdown 1.6</a></li>
                </ul>
            
            </li>
            <li class="currentsub"><a class="fly" href="#url">Dropdown two</a>
            
                <ul class="fly2">
                    <li><a href="#url">Dropdown 2.1</a></li>
                    <li><a href="#url">Dropdown 2.2</a></li>
                    <li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
                    <li><a href="#url">Dropdown 2.4</a></li>
                    <li><a href="#url">Dropdown 2.5</a></li>
                </ul>
            
            </li>
            <li><a href="#url">Dropdown three</a></li>
            <li><a href="#url">Dropdown four</a></li>
            <li><a class="fly" href="#url">Dropdown five</a>
            
                <ul class="fly3">
                    <li><a href="#url">Dropdown 5.1</a></li>
                    <li><a href="#url">Dropdown 2.2</a></li>
                    <li><a href=http://amatullah83.blogspot.com>Dropdown 3.3</a></li>
                </ul>
            
            </li>
        </ul>
    
    </li>
    <li><a class="sub" href="dropline.html"><b>Dropline</b></a>
    
        <ul class="sub2">
            <li><a href=http://amatullah83.blogspot.com>Dropline one</a></li>
            <li><a href="#url">Dropline two</a></li>
            <li><a href="#url">Dropline three</a></li>
            <li><a href="#url">Dropline four</a></li>
            <li><a href="#url">Dropline five</a></li>
            <li><a href="#url">Dropline six</a></li>
        </ul>
    
    </li>
    <li><a class="sub" href="flyout.html"><b>Flyout</b></a>
    
        <ul class="sub3">
            <li><a href="#url">Flyout one</a></li>
            <li><a href="#url">Flyout two</a></li>
            <li><a href="#url">Flyout three</a></li>
            <li><a href="#url">Flyout four</a></li>
        </ul>
    
    </li>
    <li id="support"><a href="support.html"><b>Support</b></a></li>
    <li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</div>

4. Simpan template. Hasil dari tutorial membuat simple drop down menu dengan CSS ini seperti screnshot diatas atau lihat live demo disini.
Mudah bukan? Semoga bermanfaat.
Source from CSSMenu.co.uk