Membuat Menu Blue Ribbon Dropdown Di Blog

Di Cari Penulis Blog Yang Bisa Di Percaya, Tulisan Hasil Sendiri Tidak Copy Paste Bila Copy Paste Kasih Sumber Linknya Okey...

Halo Sahabat Blogger.

Sudah Lama Yah Saya Tidak Posting Artikel Lagi Maklum Lagi Sibuk Sama Design Baju, Oke Deh Lsng SaJa..... Ga Pake Lama Okey..

DEMO

/* Name: Blue ribbon dropdown menu
URL: http://sin1aja.blogspot.com/
Author: SYSTEM OF BLOG
*/
ul#ribMenu {
    width: 912px;
    background: #54AEE0;
    margin: 0 auto 90px;
    list-style-type: none;
    padding: 0;
    position: relative
    }

ul#ribMenu:after {
    content: "";
    visibility: hidden;
    width: 0;
    height: 0;
    display: block;
    clear: both
    }

ul#ribMenu li {
    float: left;
    margin: 0;
    padding: 0;
    border-left: 1px solid #0D589E;
    -moz-box-shadow: -1px 0 0 #76A2FF;
    -webkit-box-shadow: -1px 0 0 #76A2FF;
    box-shadow: -1px 0 0 #76A2FF;
    position: relative
    }

ul#ribMenu li:first-child {
    border-left: 0
    }

ul#ribMenu li ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    width: 300px;
    background: #09d;
    display: none;
    top: 100%
    }

ul#ribMenu li ul li {
    margin: 0;
    padding: 0;
    display: block;
    float: none;
    border: 0;
    border-bottom: 1px solid #02508D;
    z-index: 9999
    }

ul#ribMenu li ul li a {
    display: block
    }

ul#ribMenu li:hover ul {
    display: block
    }

ul#ribMenu li a {
    color: #0029FF;
    padding: 25px 10px;
    display: inline-block;
    background: #08e;
    text-decoration: none;
    font: bold 15px/20px Arial, sans-serif;
    text-transform: uppercase;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
    }

ul#ribMenu li a:hover {
    background: #1472D8
    }

ul#ribMenu span.ribKiri, ul#ribMenu span.ribKanan {
    position: absolute;
    border: 35px solid;
    top: 100%
    }

ul#ribMenu span.ribKiri {
    border-color: #08569E #08569E transparent transparent;
    left: 0
    }

ul#ribMenu span.ribKanan {
    border-color: #08569E transparent transparent #08569E;
    right: 0
    }

ul#ribMenu span.ribKiri span.ribdalamKiri, ul#ribMenu span.ribKanan span.ribdalamKanan {
    position: absolute;
    border: 35px solid;
    top: -35px;
    width: 50px;
    z-index: -1
    }

ul#ribMenu span.ribKiri span.ribdalamKiri {
    border-color: #1885EB #1885EB #1885EB transparent;
    left: -85px
    }

ul#ribMenu span.ribKanan span.ribdalamKanan {
    border-color: #1885EB transparent #1885EB #1885EB;
    right: -85px
    }

<ul id='ribMenu'>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Drop</a>
<ul>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
</ul>
</li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Drop</a>
<ul>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
</ul>
</li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Drop</a>
<ul>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
</ul>
</li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<span class='ribKiri'><span class='ribdalamKiri'></span></span><span class='ribKanan'><span class='ribdalamKanan'></span></span>
</ul>

Maaf Ya Kalau Jelek, Sekalian Mau Ngucapin Selamat Hari Natal Dan Tahun Baru 2012/ 2013 Semoga Di Tahhun Blog Ini Makin Baju Ya....., Amieeen.

Sumber : Click Here