Jumat, 20 Juli 2012

Blue ribbon dropdown menu


Bentuk menu Big blue

ILUSTRASI

/* Name: Blue ribbon dropdown menu
URL: http://zhinto.blogspot.com/
Author: zhinto
*/
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 marhaban ya ramadhan selamat menunaikan ibadah puasa bagi yang udah menunaikan :).