/* 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 :).