Menu
» » Blogger Clasic Pop Yatay Menü

A+ A-

    Blog Sitenizde kullanabileceğiniz güzel kullanışlı ve Açılır klasik Yatay menü.
CSS kodlarını Kumanda Paneli > Şablon > HTML Düzenle  yolunu izleyin.
 </body> kodunu bulun ve hemen üstüne aşağıda ki CSS kodlarını ekleyin şablonu kaydedin.
Eğer çalışmaz ise CSS kodlarını </body> kodunun altına ekleyin.

HTML Kodları;
<html>
    
    <head>
        <style type="text/css">


            #menum ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }


            #menum li {
                float: left;
                position: relative;
                width: 200px;
            }


            #menum li ul {
                display: none;
                left: 0;
                position: absolute;
                top: 21px;
            }


            #menum ul li a {
                background: #EFEFEF;
                border-color: #CCCCCC #888888 #555555 #BBBBBB;
                border-style: solid;
                border-width: 1px;
                color: #000000;
                display: block;
                font: bold 12px Arial, Helvetica, Sans-serif;
                margin: 0;
                padding: 2px 3px;
                text-decoration: none;
                line-height: 16px;
            }



            #menum ul li a:hover {
                background: #FFFFFF;
                color: #FF0000;
            }


            #menum li:hover ul {
                display: block;
            }


        </style>
    </head>
    
    <body>
        <div id="menum">
            <ul>
                <li>
                    <a href="#">Anasayfa</a>
                </li>
                <li>
                    <a href="#">Hakkımızda</a>
                    <ul>
                        <li>
                            <a href="#">Şirket Tarihçesi</a>
                        </li>
                        <li>
                            <a href="#">Yöneticilerimiz</a>
                        </li>
                        <li>
                            <a href="#">Çalışanlarımız</a>
                        </li>
                        <li>
                            <a href="#">Faaliyetlerimiz</a>
                        </li>
                    </ul>
                    <li>
                        <a href="#">Hizmetlerimiz</a>
                        <ul>
                            <li>
                                <a href="#">Web Tasarım</a>
                            </li>
                            <li>
                                <a href="#">Hosting</a>
                            </li>
                            <li>
                                <a href="#">Logo Tasarım</a>
                            </li>
                            <li>
                                <a href="#">Danışmanlık</a>
                            </li>
                        </ul>
                        <li>
                            <a href="#">Referanslarımız</a>
                        </li>
                        <li>
                            <a href="#">İletişim</a>
                        </li>
            </ul>
        </div>
    </body>

</html>
CSS Kodları;
<html>
    
    <head>
        <style type="text/css">


            #menum ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }


            #menum li {
                float: left;
                position: relative;
                width: 200px;
            }


            #menum li ul {
                display: none;
                left: 0;
                position: absolute;
                top: 21px;
            }


            #menum ul li a {
                background: #EFEFEF;
                border-color: #CCCCCC #888888 #555555 #BBBBBB;
                border-style: solid;
                border-width: 1px;
                color: #000000;
                display: block;
                font: bold 12px Arial, Helvetica, Sans-serif;
                margin: 0;
                padding: 2px 3px;
                text-decoration: none;
                line-height: 16px;
            }



            #menum ul li a:hover {
                background: #FFFFFF;
                color: #FF0000;
            }


            #menum li:hover ul {
                display: block;
            }


        </style>
    </head>
    
    <body>
        <div id="menum">
            <ul>
                <li>
                    <a href="#">Anasayfa</a>
                </li>
                <li>
                    <a href="#">Hakkımızda</a>
                    <ul>
                        <li>
                            <a href="#">Şirket Tarihçesi</a>
                        </li>
                        <li>
                            <a href="#">Yöneticilerimiz</a>
                        </li>
                        <li>
                            <a href="#">Çalışanlarımız</a>
                        </li>
                        <li>
                            <a href="#">Faaliyetlerimiz</a>
                        </li>
                    </ul>
                    <li>
                        <a href="#">Hizmetlerimiz</a>
                        <ul>
                            <li>
                                <a href="#">Web Tasarım</a>
                            </li>
                            <li>
                                <a href="#">Hosting</a>
                            </li>
                            <li>
                                <a href="#">Logo Tasarım</a>
                            </li>
                            <li>
                                <a href="#">Danışmanlık</a>
                            </li>
                        </ul>
                        <li>
                            <a href="#">Referanslarımız</a>
                        </li>
                        <li>
                            <a href="#">İletişim</a>
                        </li>
            </ul>
        </div>
    </body>

</html>
Aşağıda Yorum ve Sorularınızı Bırakın.



YAZAR :
Etiketler:

PAYLAŞ:

zaman: 14:03

Yorum Gönder Blogger

Kaydol: Kayıt Yorumları (Atom)
 
Top