Matte (Yatay CSS Menü)

5 farklı renkte yer alan yatay ve görünümü oldukça hoş CSS Menü örneği

Tek bir resim dosyası ve bir CSS menü kodu ile kolay ve basit bir kodu vardır.

 Örnek Çalışmayı buraya komple bilgisayarınıza indirebilirsiniz.

                
<div id="menu_wrapper" class="grey">
            <div class="left"></div>
            <ul id="menu">
                <li><a href="http://www.cssornekleri.com">Ana Sayfa</a></li>
                <li class="active"><a href="http://www.cssornekleri.com">Hakkımızda</a></li>
                <li><a href="http://www.cssornekleri.com">Hizmetlerimiz</a></li>
                <li><a href="http://www.cssornekleri.com">İletişim</a></li>
            </ul>
        </div>
         

<style type="text/css">
            body {
                padding: 50px;
            }
            /* The CSS Code for the menu starts here */
            #menu {
                font-family: Arial, sans-serif;
                font-weight: bold;
                text-transform: uppercase;
                margin: 20px 0;
                padding: 0;
                list-style-type: none;
                background-color: #eee;
                font-size: 13px;
                height: 40px;
                border-top: 2px solid #eee;
                border-bottom: 2px solid #ccc;
            }
            #menu li {
                float: left;
                margin: 0;                
            }
            #menu li a {
                text-decoration: none;
                display: block;
                padding: 0 20px;
                line-height: 40px;
                color: #666;
            }
            #menu li a:hover, #menu li.active a {
                background-color: #f5f5f5;
                border-bottom: 2px solid #DDD;
                color: #999;
            }
            #menu_wrapper ul {margin-left: 12px;}
            #menu_wrapper {padding: 0 16px 0 0; background: url(/img/menu/matte/grey.png) no-repeat right;}
            #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(/img/menu/matte/grey.png) no-repeat left;}            
         
        </style>