Default, gri, beyaz ve siyah olarak 4 farklı şekilde kullanılabilinir

Örnek uygulamayı görüntülemek için buraya tıklayın

Html, javascript ve css kodları aşağıda

<div class="menu grid-f3">

    <ul class="navmenu">
        <li><a href="http://mavitm.com" target="_blank">Anasayfa</a></li>
        <li><a href="http://mavitm.com" target="_blank">Kurumsal</a>
            <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">Hakkımızda</a></li>
                <li><a href="http://mavitm.com" target="_blank">Misyon</a></li>
                <li><a href="http://mavitm.com" target="_blank">Vizyon</a>
                     <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">Hakkımızda</a></li>
                        <li><a href="http://mavitm.com" target="_blank">Misyon</a></li>
                        <li><a href="http://mavitm.com" target="_blank">Vizyon</a></li>
                    </ul> 
                </li>
            </ul> 
        </li>
        <li><a href="http://mavitm.com" target="_blank">Referanslar</a>
            <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">Sağlık Kuruluşları</a></li>
                <li><a href="http://mavitm.com" target="_blank">Oteller</a></li>
                <li><a href="http://mavitm.com" target="_blank">Gezi Mekanları</a></li>
            </ul> 
        </li>
        <li><a href="http://mavitm.com" target="_blank">İletişim</a>
            <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">İletişim Bilgileri</a></li>
                <li><a href="http://mavitm.com" target="_blank">İletişim Formu</a></li>
                <li><a href="http://mavitm.com" target="_blank">İnsan Kaynakları</a></li>
                <li><a href="http://mavitm.com" target="_blank">Geri Bildirim</a></li>
            </ul> 
        </li>
    </ul>

    <div class="clear left"></div>
</div>

javascript

$(document).ready(
    function(){

        $(".navmenu ul ").css({display: "none"}); // Opera Fix
        $(".navmenu li").hover(
            function(){$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);},
            function(){$(this).find('ul:first').css({visibility: "hidden"});}
        );

        $(".navmenusub").each(
            function(){
                $(this).parent("li").find("a:first").append('<b class="navmenuarrow"></b>');
            }
        );
    }
);

css

.menu{margin:50px 0px; min-height:30px;}

.navmenu{margin:0px; padding:0px; list-style:none; width:100%;}
    .navmenu > li{float:left; border: 1px solid #e3e3e3; border-left:1px solid #FFF;}
    .navmenu > li:first-child{
        border-left:1px solid #e3e3e3;
          -webkit-border-bottom-left-radius: 4px;
                  border-bottom-left-radius: 4px;
          -webkit-border-top-left-radius: 4px;
                  border-top-left-radius: 4px;
          -moz-border-radius-bottomleft: 4px;
          -moz-border-radius-topleft: 4px;
    }
    .navmenu > li:last-child{
          -webkit-border-top-right-radius: 4px;
                  border-top-right-radius: 4px;
          -webkit-border-bottom-right-radius: 4px;
                  border-bottom-right-radius: 4px;
          -moz-border-radius-topright: 4px;
          -moz-border-radius-bottomright: 4px;          
        }

    .navmenu li{  
        position:relative;
        background-color: #fafafa;
        background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
        background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
        background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
        background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
    }
    .navmenu li:hover, .navmenu .active{  
        background-color: #fafafa;
        background-image: -moz-linear-gradient(top, #f2f2f2, #ffffff);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ffffff));
        background-image: -webkit-linear-gradient(top, #f2f2f2, #ffffff);
        background-image: -o-linear-gradient(top, #f2f2f2, #ffffff);
        background-image: linear-gradient(to bottom, #f2f2f2, #ffffff);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffffffff', GradientType=0);
    }

        .navmenu li a{display:block; color:#333; text-decoration:none; padding:10px 10px;}

            .navmenu ul{padding:0px; margin:0px; list-style:none; position:absolute; display:none;}
            .navmenu li ul{left:100%; top:0px;} 
            .navmenu > li > ul{top:100%; left:0px;} 
                .navmenu > li  ul li{min-width:200px; border: 1px solid #e3e3e3; border-top:none;}  

                .navmenu > li  ul li:first-child{
                    border-top: 1px solid #e3e3e3;  
                    -webkit-border-top-right-radius: 4px;
                          border-top-right-radius: 4px;
                  -webkit-border-top-left-radius: 4px;
                          border-top-left-radius: 4px;
                  -moz-border-radius-topleft: 4px;
                  -moz-border-radius-topright: 4px;
                }
                .navmenu > li  ul li:last-child{
                  -webkit-border-bottom-right-radius: 4px;
                          border-bottom-right-radius: 4px;
                  -webkit-border-bottom-left-radius: 4px;
                          border-bottom-left-radius: 4px;
                  -moz-border-radius-bottomleft: 4px;
                  -moz-border-radius-bottomright: 4px;  
                }

    .navmenuarrow {
      display: inline-block;
      width: 0;
      height: 0;
      vertical-align: top;
      border-top: 4px solid #000000;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      content: "";
      margin:8px 0px 0px 10px;
    }

    .navmenusub .navmenuarrow {
      display: inline-block;
      width: 0;
      height: 0;
      vertical-align: top;
      border-left: 4px solid #000000;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      content: "";
      margin:6px 0px 0px 10px;
    }

/** COLOR **/
.navmenu.gri li{
      background-color: #ededed;
  *background-color: #e5e5e5;
  background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
}

.navmenu.beyaz li{
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
}

.navmenu.siyah li{
  background-color: #000000;
  background-image: -moz-linear-gradient(top, #000000, #333333);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#333333));
  background-image: -webkit-linear-gradient(top, #000000, #333333);
  background-image: -o-linear-gradient(top, #000000, #333333);
  background-image: linear-gradient(to bottom, #000000, #333333);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#ff333333', GradientType=0);
}
.navmenu.siyah > li{float:left; border: 1px solid #000000; border-left:1px solid #666666;}
.navmenu.siyah > li ul li{border-bottom:1px solid #666;}
.navmenu.siyah li a{color:#FFF;}
.navmenu.siyah > li .navmenuarrow{border-top: 4px solid #FFFFFF;}
.navmenu.siyah  li .navmenusub .navmenuarrow{border-left: 4px solid #FFFFFF; border-top: 4px solid transparent;}