Güneş Web Tasarım Bilişim Hizmetleri

LÜLEBURGAZ WEB TASARIM SİZ KURUMSAL MÜŞTERİLERİMİZ İÇİN KALİTELİ HİZMET VE UYGUN PAKETLER

HAKKIMIZDA

Güneş Web Tasarım ekibi olarak yaptığı işi seven, yenilikçi, dinamik ve profesyonel kadromuzla bu güne kadar yaptığımız her işe aynı özveri ve değer katma çabasıyla yaklaşarak birçok başarılı işe imzamızı attık. Yaptığımız işlerin hepsinde müşterilerimiz için hem onlarla, hem de işi yapacak olan ekiple birlikte oturup en doğru kararı en doğru şekilde dinleyerek, konuşarak ve yaptığımız işi severek gerçekleştirdik. İşimize duyduğumuz sevgi ve müşterilerimize duyduğumuz saygı bizi şu an bulunduğumuz noktaya getirdi. Bize gelen her markanın bir kimliği olduğu bilinciyle o kimliğe uygun tarzda ve yapıda işler çıkartmak için dersimize her defasında fazlasıyla çalıştık. Alelade bir iş yapmaktan her zaman uzak durduk ve tüm işlerimizde bu tutumumuzu koruduk. Yeri geldi standartlara uyduk, yeri geldi standartların dışına çıktık. Yapılan doğru işin müşteriye kazanç sağladığı bilincinde olduğumuz kadar, yanlış işlerin de zararı olduğunu bilerek özen ve sabırla en doğru işi yaptık ve yapmaya devam ediyoruz.Neler yaparız?Dijital bir ajans olarak Güneş Web Yazılım, Web tasarım ve yazılım, E-ticaret, Seo, Sem, Video ve Flash animasyon, Sosyal medya ve Mobil uygulamalara kadar dijital birçok alanda online çözümler sunan, kısacası interaktif bir “Tam Hizmet ajansı” ile sizlere hizmet vermeyi ilke edinmiş bir dijital reklam ajansıdır. Aynı zamanda Güneş Web Yazılım ürettiği kendi yazılımları ile hem kurumsal müşterilere hem de ajanslara özel çözümler sunmaktadır. Kurumsal web siteleri için tamamen Güneş Web Yazılım tarafından geliştirilmiş olan CMS’imiz ile oluşturduğumuz tüm web siteleri Süper Seo Uygunluğu ile çalışmakta olup ‘’site içi seo’’ ile sayfanızın maksimum seviyede optimize edilmesine olanak sağlamakta ve tüm içeriğin bir ajansa ihtiyaç kalmaksızın sizin tarafınızdan güncellenmesine olanak sağlamaktadır.

HİZMETLERİMİZ

WEBTASARIM

WEBYAZILIM

MOBİL YAZILIM

GRAFİK TASARIM

GOOGLE ADWORDS

SEO

SOSYAL MEDYA UZMANLIĞI

Ve daha fazlası için web sitemizi ziyaret etmeyi unutmayın!

http://guneswebtasarim.com/

Berat Kandili

İçinde bulunduğumuz Şaban ayının 14. gününü 15. güne bağlayan gece Berat Gecesidir.
Berat Kandili İslam Dini'nde kutsal kabul edilen önemli gecelerdendir. Osmanlı İmparatorluğu'nda
ikinci Selim'den itibaren minarelerde kandil yakılmasıyla kandil adını almıştır.

Berat Kandili Şaban ayının yarısı, Ramazan'ın müjdecisidir. Borçtan, suç ve cezadan, hastalıktan kurtulma, günahlardan arınma beraat etme, ilahi affa ve rahmete nail olmaktır.
Berat; kırılan kalpleri onarma, kin, nefret ve intikam duygularını aşma günüdür. Her türlü kötülüklerden temizlenme ve arınma gecesidir. Yüce Allah'ın affına erişebilmek için yaradılanı effetme gecesidir.

Hz. Peygamber Efendimiz şöyle buyurur: ''Şaban ayının 15. gecesini ibadet ederek geçirin. Gündüzün de oruç tutun. çünkü Yüce Allah bu gece dünya semasına rahmetiyle tecelli eder ve ''Yok mu tövbe eden tövbesini kabul edeyim! Yok mu şifa isteyen şifa vereyim! Yok mu rızık isteyen rızık vereyim!
Yok mu başka isteği olan ona da istediğini vereyim''
(İbn Mâce, Sünen, ''İkâmetü's-salât'', 191.)

Melek Annelerin Günü

Hayatımızdaki değeri ölçülemeyen tüm annelerin anneler günü kutlu olsun.Lütfen annelerimizi üzmeyelim. Kalplerini kırmayalım sevgili dostlarım.
Bu anlamlı günde annenize ne aldınız? Ben çiçek aldım annem çok sever :)

Yazacak çok şeyler var ama kelimeler yetersiz kalır.Sevgiyle kalın şimdilik...

BLOGSPOT HTTPS GÜNCELLEMESİ GECİKTİ

Merakla beklediğimiz Blogger'ın HTTPS güncellemesi öyle sanıyorum ki gecikmiş durumda.

Yukarıda gördüğünüz ileti blogger kontrol panelimizde dikkatinizi çekmiştir.Bir süredir ''nisan ayının sonunda HTTPS sürümü sizlerle'' diye uyarısı halen durmaktadır.Bu gün itibarı ile mayıs ayına girdik ama halen beklenen güncelleme gerçekleşmedi. Herhalde biraz rotar yapacakmış gibi görünüyor
ne dersiniz :)

23 Nisan Ulusal Egemenlik ve Çocuk Bayramı

Bugün Türkiye Cumhuriyeti ve Kuzey Kıbrıs Türk Cumhuriyeti'nin resmi tatili ve çocuk bayramıdır.
Ulu önder Atatürk, bu günü sevgili çocuklarımıza armağan etmiştir.
Dünyada çocuklar için armağan edilmiş bir resmi bayram başka yoktur.

1980 darbesi döneminde Milli Güvenlik Konseyi bu bayrama resmi olarak ''23 Nisan Ulusal Egemenlik ve Çocuk Bayramı'' adını vermiştir. Tüm çocuklara kutlu olsun.

BUGÜN BENİM DOĞUM GÜNÜM

Regaip Kandili

Harika Tasarımlı Blogger Boutique template

Merhaba sevgili okurlar!
Yine güzel bir tema paylaşımıyla sizlerleyim. Temanın adı Boutique özellikle bayan blogger arkadaşlarımızın ilgisini çekeceğini düşünüyorum. Tabi aslında herkes kullanabilir. Karar vermek size kalmış :)

boutique

Özetle tema özelliklerinden söz etmek istiyorum. İncelemem sonucu temada şık bir slider var.
Kategori görünümlü postlar var.
Bolca açılır menüleri var. Tabi bolbol konular, kategoriler ekleme imkanınız var demektir.
Tasarımının güzel olmasıyla beraber biraz daha farklı çizgileri aşmış özgün bir dizayna sahip.
Renklerin uyumu oldukça güzel. Yazı sitilleri rahat okunabilir nitelikte.
Footer kısmına yine gadgetler ekleyebilirsiniz.
Daha iyi incelemeniz için canlı demo bağlantısı ekledim. Buyrun

Demo Canlı Demo Download Tıkla indir

ŞU AN BLOGUMDA KULLANDIĞIM AÇILIR MENÜ KODLARI

Blog yayınlarınızın karmaşadan kurtulup daha derli toplu olması için açılır menü eklemeniz çok faydalı olacağı kanısındayım. Şu an bu blogumda kullandığım açılır menü kodlarını paylaşıyorum.
Böylece blogda gezinti daha akıcı ve daha kolay olmasını sağlanmış olacaktır.
Ziyaretçiler aradığını çok daha kolay bulabilecekler. Sayfalarınız daha çık tıklamış olacaktır.
Daha düzenli ve profesyonel bir görünüm kazanmış olacak blogunuz.

Neyse dostlarım uzatmadan anlatıma geçelim :)

Bildiğiniz gibi Blogger'a giriş yapıyoruz.
Şablon sekmesine tıklayıp, HTML'yi Düzenle diyoruz. Sonrasında blogun kodlarına ulaşmış oluyoruz. Burada CTRL+F tuşları yardımıyla aşağıdaki kodu buluyoruz;

]]></b:skin>

Bulduğumuz bu kod satırının hemen üzerine aşağıdaki stil kodlarını ekliyoruz.

#menu h2 {display:none} .menu,.menu h3,.menu a,.menu ul,.menu li { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0 } .menu ul,.menu li { font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } .menu h3 { font-family:Arial, Helvetica, sans-serif; font-weight:600; font-size:14px; line-height:21px; margin-top:7px; margin-bottom:14px; padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF; border-bottom:1px solid #888; } .menu { list-style:none; width:900px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #1b95e0; border: 1px solid #1b95e0; border-top: 1px solid #1b95e0; background: -moz-linear-gradient(top, #1b95e0, #047DC7); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b95e0), to(#047DC7)); } .menu li { float:left; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li:hover { z-index:2; background:#F4F4F4; border:1px solid #aaaaaa; padding: 4px 9px 4px 9px; background: -moz-linear-gradient(top, #FFF7EE, #000000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF7EE), to(#FFEEDD)); -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .menu li.no_drop:hover { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li a { color: #FFFFFF; outline:0; text-decoration:none; display:block; text-shadow: 1px 1px 1px #000; } .menu li:hover a { color:#161616; text-shadow: none; } .menu li .drop { padding-right:21px; background:url(https://lh3.googleusercontent.com/-iBBwiQsbNuQ/Vpq1Q-_qQeI/AAAAAAAADlk/x4ExQcDTXGk/s12-Ic42/drop.png) no-repeat right 8px; } .menu li:hover .drop { padding-right:21px; background:url(https://lh3.googleusercontent.com/-iBBwiQsbNuQ/Vpq1Q-_qQeI/AAAAAAAADlk/x4ExQcDTXGk/s12-Ic42/drop.png) no-repeat right 7px; } .menu li:hover div a { color:#005284; } .menu li:hover div a:hover { color:#000000; } .menu li ul li a:hover { color:#FFC488; } .dropdown_1column,.dropdown_2columns { margin:4px auto; position:absolute; background: #FFF7EE; border:1px solid #aaaaaa; border-top:none; padding:10px 5px 10px 5px; background: -moz-linear-gradient(top, #1b95e0, #111111); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b95e0), to(#FFFFFF)); } .dropdown_1column,.dropdown_2columns { left:-999em; text-align:left; -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; -khtml-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto} .col_1,.col_2 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } .menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } .menu li ul li:hover {background:none; border:none; padding:0; margin:0; }

Hemen devamında yine ctrl+f tuşlarını kullanarak aşağıda belirttiğim kod satırını buluyoruz;

<div class='tabs-outer'>

Hemen üstüne HTML kodlarını yani menülerimizin olduğu kodları ekliyoruz. Sonrasında şablonu kaydetmeyi unutmayın.

<ul class='menu'><li class='no_drop'><a href='http://yuksel-duman.blogspot.com/'>Ana Sayfa</a></li><li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/yazar.html'>Hakkımda</a></li><li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/iletisim-formu.html'>İletişim</a></li><li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/arsiv.html'>Arşiv</a></li><li class='no_drop'><a href='http://yuksel-duman.blogspot.com/p/ne-dediler.html'>Önerileriniz</a></li><li class='no_drop'><a href=''>Destek Ol</a></li><li><a class='drop' href='#'>Kategoriler</a> <div class='dropdown_1column'> <div class='col_1'> <ul><li><a href=''>Blog Araçları</a></li><li><a href=''>Bloger</a></li><li><a href=''>Blog Makaleleri</a></li><li><a href=''>Blogspot SEO</a></li><li><a href=''>Blog İpuçları</a></li><li><a href=''>Blogger Eklentileri</a></li><li><a href=''>Blogger İpuçları</a></li><li><a href=''>Blogger Şablonları</a></li><li><a href=''>Miasfir Yazılar</a></li><li><a href=''>SEO</a></li><li><a href=''>Sosyal Medya</a></li></ul></div></div></li><li><a class='drop' href='#'>Araçlar</a> <div class='dropdown_2columns'><div class='col_1'> <h3>Google Araçları</h3><ul><li><a href='https://www.google.com/webmasters/tools/mobile-friendly/'>Mobil Uyumluluk</a></li><li><a href='http://www.google.com/analytics/'>Google Analytics</a></li><li><a href='http://www.google.com/intl/tr/webmasters/'>Google Webmasters</a></li><li><a href='https://developers.google.com/speed/pagespeed/insights/'>Google Page Speed</a></li></ul></div><div class='col_1'> <h3>Çeşitli</h3><ul><li><a href='http://yuksel-duman.blogspot.com/p/html-editor.html'>HTML Editor</a></li><li><a href='http://yuksel-duman.blogspot.com/p/webmaster-makaleler.html'>WM Makale</a></li><li><a href='http://yuksel-duman.blogspot.com/p/misafir-blogculuk.html'>Makaleni Yayınla</a></li><li><a href='http://yuksel-duman.blogspot.com/p/tanitim-yazilari.html'>Site Tanıtım</a></li></ul></div><div class='col_1'> <h3>Sosyal Medya</h3><ul><li><a href=''>Facebook</a></li><li><a href=''>Twitter</a></li><li><a href=''>Google+</a></li></ul></div><div class='col_1'> <h3>Linkler</h3><ul><li><a href=''>Link1</a></li><li><a href=''>Link2</a></li><li><a href=''>Link3</a></li></ul></div></div></li></ul>

Sevgili arkadaşlar işlemimiz bu kadar. Açılır menümüz blogumuza eklenmiş oldu.
Takıldığınız yerler olursa lütfen sormaktan çekinmeyin.Yardım ederim.
Sevgiyle kalın...

KİŞİYE ÖZEL LOGO VE HEADER YAPILIR

Merhabalar değerli okurlarım!

Blogumun okurlarına mahsus kişiye özel logo ve header tasarımı yapmaya karar verdim.
Üstelik bu hizmeti siz değerli okurlarım için ücretsiz olarak sunmaktayım.

Sahibi olduğunuz blog veya site ismini yorum formundan göndermeniz yeterli olacaktır.
Uygun görülen sitelerin header veya logosu bu başlık altında yayınlanacaktır. Ayrıca sitenizin tanıtımı için de faydalı olacaktır logonuzun burada görünmesi

Tasarım yapacağım siteleri ziyaret edip sonra header yaptığım için ölçüleri bire bir uyumludur.
Dolayısıyla bloga eklerken 'sığacak şekilde küçült' seçeneğini işaretlemeyin. Bu durum blogunuzda headerin düzgün görünmesi içindir.

Gerekli Şartlar;

Müstehcen yayın yapan site ve bloglar kabul edilmeyecek.

Hack, warez paylaşımı yapan siteler kabul edilmeyecek.

Siyasi kimliğe bürünmüş siteler kabul edilmezler.

Lütfen Dikkat!

Site ismi bildirirken tıklanabilir link vermekten kaçının.

Nasıl kullanılır?

Resme tıklayın böylece daha büyük yani gerçek ölçüde açılmış olacaktır. Resim üzerine maus sağ tuş ile tıklayıp 'hedefi farklı kaydet' seçerek kaydedin. Kaydettiğiniz resmi web sitenizde kullanın.

Bloga eklenişi

Blogger kontrol panelinizde Yerleşim'e tıklayın. Üst tarafta Header başlığı  altındaki düzenle yazısına tıklayın. İndirdiğiniz resmi seçip kaydedin. Son olarak sağ üst köşede düzenlemeyi kaydet
Yeni header ve logonuzu güle güle kullanın.



Kişiye Özel Logo, Header Tasarımlarım:


Kişiye özel - The Social News - Header;

Kişiye özel - KurabiyeciMiss - Header;

Kişiye özel - Şeyda'nın Günlüğü - Header;

Kişiye özel - Bir Defne Masalı - Header;

Kişiye özel - İnci'nin Dünyası - Header;

Kişiye özel - Efsa'nın Serüveni - Header;

Kişiye özel - Hayat Cıvıltısı - Logo

Kişiye özel -  Şenay'la Mutfak Keyfi - Logo header

Kişiye özel - Ayna Hikayesi - Header

SOĞUK HAVALARDA ARAÇ NASIL ÇALIŞTIRILIR?

İçinde bulunduğumuz bu kış günlerinde haliyle havanın soğuk olmasından dolayı araçlarımız çalışmayabilir.



Sizin de başınıza geldi mi bilmiyorum ama ben yaşadım. Bir gece öyle bir soğuk oldu ki mevsimin en soğuk gecesi diyebilirim. Sıcaklık gece -20 - 25 derecelerde vardı yanılmıyorsam. Anlaşılan bu durumdan pek hoşnut olmamıştı beyaz kızım (arabam) ve haliyle üşümüştü. Sabah birkaç kontak çevirmeme rağmen çalışmamıştı. Ne kadar üzücü bir durum öyle değil mi? Dolayısıyla ben de üzülmüştüm bu duruma.

Peki soğuk havada araba nasıl çalıştırılır?

Aracınız dizel bir araç ise soğuk havalarda kullanmanız daha zor olacaktır. Nedeni ise dizel motorlu arabalar soğukta daha erken kendini bırakırlar. Bunlar mazotun donup akışkanlığını yitirmesi ve katılaşması, mazot filtresinin soğuktan donması hatta yakıt deposunun ve bağlantılı borularının donması olabilir. Ayrıca akünüzün soğuktan kendi kendine deşarj olması aracınızı çalışmamasına neden olan faktörlerdir.
Benzinliler dizel araçlara nazaran daha dirençlidir. Çünkü benzin soğuğa daha dayanıklıdır ve kolay kolay donmaz. Ne yazık ki soğuk hava aküyü boşaltır.
Arabanızı soğuk havalarda kullanabilmek için kapalı bir garaja park etmeniz çok faydalı olacaktır. Tabi imkanınız varsa. Eğer böyle bir imkan yoksa şunları öneriyorum;

Aracınızı park ettikten sonra her iki saatte bir 10 dakika rolantide çalıştırın.
Bu durumu gece 12- 01'e kadar yapın sonra yatın.
Aracınızı bina önlerine doğru park edin. Yani ön kaput binaya doğru olmalı yada duvar diplerine doğru gelmesi gerek. Bu arada çatıdan düşebilecek buz parçalarına karşı önlem almak amacıyla binanın iki - üç metre gerisine park edin.
Açık ve rüzgarlı alanlara park etmeyin.
Aracın motor kısmı kuzeye doğru olmamalıdır.
Elektrikli ekipmanları devre dışı bırakın. Bunlar araç içi kamera. ektra müzik sistemi gibi şeyleri kışın kullanmayın. Akünüzü daha erken bitirir.
Eğer bu gibi kurallara dikkat edersek kışın aracımızı donmadan aküsü bitmeden kullanabiliriz.
Sanırım aklınıza aküsü biten araç nasıl çalıştırılır sorusu takıldı gibime geliyor. Bunu da başka bir makalemde yazmak dileğiyle şimdilik esen kalın.

SEO Blogger Template

Seo blogger template kısaca özellikleri;

SEO hazır
Post RSS ve Comment RSS bağlantıları hazır
Minimalist tema
Sade ve şık dizayn
Sağ yan bar
Sosyal ağ paylaşım butonları
Gadget desteği
Sağ üst köşeye reklam ekleme
Özelleştirilmiş yorumlar

Demo Live Demo Download indir

Blogger Moments Tema

Farklı bir tasarıma sahip olan moments theme oldukça kullanışlı.Renk ve dizayn alışılmışın dışında
umarım bu temayı beğenirsiniz.
Temayı incelemem sonucu sol tarafta statik site başlığı ve menüler yeralmaktadır.
Göze hitap eden dizaynı, okuyucuyu yormayan yazı sitili gibi bazı özellikler mevcut.

Download Buraya Tıkla

VideoBox Blogger Template

Videobox blogger video teması.. Temanın biraz özelliklerinden bahsedeyim;
Video ve müzik yayını yapan siteler için ideal
Minimalist tema
SEO dostu
Reklam hazır
Clean yazı tasarımı
Hızlı yüklenme
Browser uyumluluk
Drop down menu
Sosyal paylaşım
Sağdan sidebar
Sayfa numaralandırma

Demo Live Demo Download Tıkla indir

Blogspot Bloglar için SeoSpot Blogger Tema

Seospot Blogger tama. Blog için vazgeçilmez unsurlardan biri de şüphesiz ki temalardır. Bir tema hoşumuza gitti ise onu kendi blogumuza yüklemek ve kullanmak isteyebiliriz. Bir de temanın göze hitap etmesi ve seo uyumlu tema olması da önem arz eden etkenler arasında.



Bu tema Wordpress teması olup Blogger için dizayn edilmiştir.

SeoSpot Blogger Template Başlıca Özellikleri;

Slider ve slider olmadan kullanabilme (indireceğiniz dosya içinde her iki xml de mevcuttur)
SEO hazır
Reklamlar hazır
Sunucuyu yormayan tema
Sade ve şık dizayn
Profesyonel tema
Şık ve kullanışlı açılır menü özelliği
Sağ sidebar
Otomatik yazı kısaltma anasayfa kirliliğini engeller
Sosyal medya profil ve paylaşım butonları gibi daha birçok özellikleri vardır.

Download indir

CSS3 + HTML DROP DOWN MENU KODLARI

Drop down menü kelime anlamı olarak aşağıya doğru açılan menü anlamına gelmektedir.
Blogspot blog'da açılır menü olmadığı için biz bu işi CSS ve HTML kodlarıyla kolayca yapabiliriz.

________________________________________________________________________________
Bilgi! HTML Editor aracını kullanarak, blogunuza uygulamadan önce menüleri canlı görüntüleme şansınız var.
Kullanım: 'Buraya CSS Kod Ekle': CSS kodları ekleyin.
'Buraya HTML Kod Ekle': HTML kodları ekleyin ve 'Preview' butonuna tıklayın.
________________________________________________________________________________

Açılır menü ekran görüntüsü;




Siz de bloğunuza açılır menü yapmak isterseniz şunları yapın.
açılır menü kodları, tab menu, sekmeli menü, yatay menü

CSS Drop Down Menü

Açılır Menü Yapımı;

Blogger kontrol panelinize giriş yapın.Karşınıza bologunuz ya da bloglarınız çıkacaktır.
Drop down menüyü yapmak istediğiniz blogu seçin. Şablon-HTML'yi Düzenle yolunu izleyerek
blog kodlarına ulaşın. CTRL+F tuşlarını kullanarak şu kodu bulun.

]]></b:skin>

Hemen üzerine CSS drop down menu kodları ekleyip kaydedin.

.menus,.menus *{list-style:none;list-style-type:none;line-height:1.0;margin:0;padding:0;} .menus ul{position:absolute;top:-999em;width:100%;} .menus ul li{width:100%;} .menus li:hover{visibility:inherit;} .menus li{float:left;position:relative;} .menus a{display:block;position:relative;} .menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99;} .sf-shadow ul{-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px;padding:0 8px 9px 0;} .menus .sf-shadow ul.sf-shadow-off{background:transparent;} .sf-with-ul{padding-right:20px;min-width:1px;} .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 10px 0 0;} .menu-secondary-container{position:static;height:44px;z-index:300;background:url(http://2.bp.blogspot.com/-VzIP0Ft_1xw/UQwlnhHDsVI/AAAAAAAABhU/-rGW_VWd4aw/s000/menu-secondary-bg.png) left top repeat-x} .menu-secondary li a{color:#FFF;text-decoration:none;text-transform:uppercase;font:normal 13px/13px georgia,arial,sans-serif;padding:16px 15px 15px;} .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(http://2.bp.blogspot.com/-VzIP0Ft_1xw/UQwlnhHDsVI/AAAAAAAABhU/-rGW_VWd4aw/s000/menu-secondary-bg.png) left -144px repeat-x;outline:0;} .menu-secondary li li a{color:#fff;background:#666;text-transform:none;font-weight:400;margin:0;padding:10px 15px;} .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;background:#FA7029;outline:0;} .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px;} .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 13px 0 0;} .menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0;} .wrap-menu-secondary .sf-shadow ul{background:url(http://2.bp.blogspot.com/-E2zHyUnkrxI/UQwlobQu5OI/AAAAAAAABhc/iM6Sp7J9NGs/s000/menu-secondary-shadow.png) no-repeat bottom right;} .menus li:hover li ul,.menus li.sfHover li ul,.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em;} .menus li li:hover ul,.menus li li.sfHover ul,.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0;} .menu-secondary ul{min-width:160px;} .span-24,div.span-24{width:960px;margin:0;} input.span-24,textarea.span-24{width:938px!important;border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;} div.span-24{float:left;margin-right:10px;}

Sol köşedeki 'Yerleşim' sekmesine tıklayıp, Gadget ekle+HTML Jawa Script seçin.
Jawa script içine aşağıdaki kodlarını ekleyip kaydedin.
Menünün nerede görünmesini istiyorsanız gedgeti oraya sürükleyin.
Örnek blog kayıtlarının hemen üzeri olabilir. dilerseniz sidebar (yan taraf) da alabilirsiniz.
Bu işlemden sonrasında 'Düzenlemeyi kaydet' butonuna tıklayıp işlemimizi sonlandırıyoruz. Açılır menü hazır.

HTML Drop Down Menu Kod;

<div class='span-24'><div class='menu-secondary-container'><ul class='menus menu-secondary'><li><a href=''>ANA SAYFA</a></li><li><a href='#'>BLOGGER</a><ul class='children'><li><a href=''>Blogger Eklentileri</a></li><li><a href=''>Html Kodları</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href='#'>Link Başlığı buraya</a><ul class='children'><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href='#'>Link Başlığı buraya</a><ul class='children'><li><a href=''>Html Editor</a></li><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href=''>Link Başlığı buraya</a></li><li><a href='#'>Link Başlığı buraya</a><ul class='children'><li><a href=''>Link Başlığı buraya</a><ul class='children'><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href=''>Link Başlığı buraya</a></li></ul></li><li><a href=''>Link Başlığı buraya</a></li></ul></div></div>

Önemli! Blogger'ın orjinal şablonlarını kullanıyorsanız eğer menü düzgün görünmeyebilir.
Bunun için şunları yapmalısınız.
Kontrol paneli, şablon, HTML'yi düzenle
CTRL+F ile şu kodları bulup silmelisiniz.

.tabs-inner .widget li a { display: inline-block; margin: 0; padding: .6em 1.5em; font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif; color: #ffffff; border-top: 1px solid #2d3037; border-bottom: 1px solid #2d3037; border-left: 1px solid #2d3037; height: 16px; line-height: 16px; } .tabs-outer { overflow: hidden; position: relative; background: #29aae1 url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0; } .tabs-inner .widget li:last-child a { border-right: 1px solid #2d3037; }

Buradaki kodları silmek menünüzün açılabilir olması içindir.
Silip aşağıdaki kodlar ile değiştiriniz.

Drop down (açılabilir) kodlar:

.tabs .widget ul, .tabs .widget ul { margin: 0px; padding: 0px; list-style: none outside none; overflow: visible; }

Ve işlemimiz bitti.

CSS3 Drop Down Menu (Animasyonlu)

CSS3 drop down menü kodları

<style type="text/css">#cssmenu ul{margin:0;padding:0}#cssmenu li{margin:0;padding:0}#cssmenu a{margin:0;padding:0}#cssmenu ul{list-style:none}#cssmenu a{text-decoration:none}#cssmenu{height:70px;background-color:#232323;box-shadow:0 2px 3px rgba(0,0,0,0.4);width:auto}#cssmenu > ul > li{float:left;margin-left:15px;position:relative}#cssmenu > ul > li > a{color:#a0a0a0;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}#cssmenu > ul > li > a:hover{color:#fff}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenu > ul > li > ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenu > ul ul > li{position:relative}#cssmenu ul ul a{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px 16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s}#cssmenu ul ul a:hover{background-color:#f0f0f0}#cssmenu ul ul ul{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu ul ul > li:hover > ul{opacity:1;left:190px;visibility:visible}#cssmenu ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- Sayfa linklerinizi yazın --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Ana Sayfa</span></a></li><li class="has-sub"><a href="#"><span>Product</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Opera Stil Drop Down menü

Opera drop down menü CSS kod:

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Ana Sayfa</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>Hakkımda</span></a></li><li class="last"><a href="#"><span>İletişim</span></a></li></ul></div>

Renkli Sekmeli Drop Down Menü:




Sekmeli drop down menu CSS kod:

<style type="text/css">@charset 'UTF-8';#cssmenu{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}#cssmenu > ul{margin-top:6px !important}#cssmenu ul{background:#CDCDCD;background:-webkit-linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);background:linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);border-top:1px solid #A8A8A8;-webkit-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}#cssmenu ul ul{border-top:6px solid #a80329;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cssmenu ul ul a{line-height:43px}#cssmenu ul ul ul{left:100%;top:0}#cssmenu li{float:left;padding:0 8px}#cssmenu li a{color:#666;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{color:#000;text-decoration:none}#cssmenu li ul{background:#e0e0e0;border-left:2px solid #a80329;border-right:2px solid #a80329;border-bottom:2px solid #a80329;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover > ul{display:block}#cssmenu li li{display:block;float:none;padding:0;position:relative;width:225px}#cssmenu li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover{background:#949494;color:#000;opacity:1.0;filter:alpha(opacity=100)}#cssmenu p{clear:left}#cssmenu .active > a{background:#a80329;-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;color:#fff}#cssmenu .active > a:hover{color:white}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Apple Tarzı CSS3 Açılır menü:





CSS3 drop down menu CSS kod:

<style type="text/css">#cssmenu ul{margin:0;padding:7px 6px 0;background:#7d7d7d url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -110px;line-height:100%;border-radius:1em;font:normal 0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0 8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-decoration:none;display:block;padding:8px 20px;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenu a:hover{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover > a{background:#979797 url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -40px;background:#666 url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul li:hover a,#cssmenu li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none}#cssmenu ul ul a:hover{background:#7d7d7d url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 -100px !important;color:#fff !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}#cssmenu li:hover > ul{display:block}#cssmenu ul ul{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;left:0;background:url(http://1.bp.blogspot.com/-HJ22JUxrT54/UjqQ-s8HTgI/AAAAAAAABcs/phC6FO25qCQ/s1600/overlay.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}#cssmenu ul ul li{float:none;margin:0;padding:3px}#cssmenu ul ul a,#cssmenu ul ul a:link{font-weight:normal;font-size:12px}#cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}* html #cssmenu ul{height:1%}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Ana Sayfa</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Kırmızı ve Gri Renk Açılır Menü:




Kırmızı gri açılır menü CSS kod:

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#cssmenu,#cssmenu > ul{background:url(http://3.bp.blogspot.com/-V2tGyRV9wIY/UjqTVGOrmXI/AAAAAAAABdQ/XYS2v7U8DUI/s1600/highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > ul{background:url(http://1.bp.blogspot.com/-fPLR6IIW7dU/UjqTVZksJTI/AAAAAAAABdU/EadZ1JqTCX8/s1600/menu-bg.png) repeat;margin:0;padding:0;position:relative}#cssmenu > ul li{margin:0;padding:0;list-style:none}#cssmenu > ul > li{float:left;position:relative}#cssmenu > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #9e3825;text-shadow:0 -1px 0 rgba(116,37,2,0.7);line-height:18px}#cssmenu > ul > li:hover > a{background:url(http://1.bp.blogspot.com/-efkMXp2H1cU/UjqSzHrMVFI/AAAAAAAABdI/TbVQZkLhC4I/s1600/hover.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenu > ul > li > a > span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu > ul > li > a:active{background:url(http://1.bp.blogspot.com/-hKJMJ6tutvA/UjqSigUJTSI/AAAAAAAABdA/EicRvUY_mlw/s1600/active.png) repeat}/* Childs */#cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(http://3.bp.blogspot.com/-V2tGyRV9wIY/UjqTVGOrmXI/AAAAAAAABdQ/XYS2v7U8DUI/s1600/highlight-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu > ul ul li a{padding:18px 26px;display:block;color:#393939;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;text-shadow:0 1px 0 white}#cssmenu > ul ul li a:hover{border-left:4px solid #de553b;background:url(http://1.bp.blogspot.com/-efkMXp2H1cU/UjqSzHrMVFI/AAAAAAAABdI/TbVQZkLhC4I/s1600/hover.png) repeat;color:white;text-shadow:0 1px 0 black}#cssmenu > ul ul li a:active{background:url(http://1.bp.blogspot.com/-fPLR6IIW7dU/UjqTVZksJTI/AAAAAAAABdU/EadZ1JqTCX8/s1600/menu-bg.png) repeat}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Silver Buton Açılır Menü (Drop Down):





Silver buton drop down menü CSS kod:

<style type="text/css">@charset 'UTF-8';/* Starter CSS for Menu */#cssmenu{padding:0;margin:0;border:0}#cssmenu ul,#cssmenu li{list-style:none;margin:0;padding:0}#cssmenu ul{position:relative;z-index:597}#cssmenu ul li{float:left;min-height:1px;vertical-align:middle}#cssmenu ul li.hover,#cssmenu ul li:hover{position:relative;z-index:599;cursor:default}#cssmenu ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenu ul ul li{float:none}#cssmenu ul ul ul{top:0;left:100%}#cssmenu ul li:hover > ul{visibility:visible}#cssmenu ul ul{margin-top:0}#cssmenu a{display:block;line-height:1em;text-decoration:none}#cssmenu ul li.last ul{left:auto;right:0}#cssmenu ul li.last ul ul{left:auto;right:99.5%}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}/* Custom CSS Styles */#cssmenu{width:auto;font-family:Helvetica,Arial,sans-serif}#cssmenu:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);background-color:#606a77;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4f5864),color-stop(1,#49515b));background-image:-webkit-linear-gradient(top,#4f5864,#49515b);background-image:-moz-linear-gradient(top,#4f5864,#49515b);background-image:-o-linear-gradient(top,#4f5864,#49515b);background-image:linear-gradient(#4f5864,#49515b);-moz-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;-webkit-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;content:'';display:block;height:8px}#cssmenu > ul{border-bottom:1px solid #252A30;border-top:1px solid #252A30;-moz-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);background-color:#566171;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6e7d8f),color-stop(1,#404854));background-image:-webkit-linear-gradient(top,#6e7d8f,#404854);background-image:-moz-linear-gradient(top,#6e7d8f,#404854);background-image:-o-linear-gradient(top,#6e7d8f,#404854);background-image:linear-gradient(#6e7d8f,#404854);height:27px;padding:15px 15px 15px 5px}#cssmenu > ul > li{margin:0 10px}#cssmenu > ul > li.has-sub:hover > a{-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}#cssmenu > ul > li:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);background-color:#e2e2e2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#c8c8c8));background-image:-webkit-linear-gradient(top,#fff,#c8c8c8);background-image:-moz-linear-gradient(top,#fff,#c8c8c8);background-image:-o-linear-gradient(top,#fff,#c8c8c8);background-image:linear-gradient(#fff,#c8c8c8)}#cssmenu > ul > li.active:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);background-color:#cb7b72;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f49b8e),color-stop(1,#bd584d));background-image:-webkit-linear-gradient(top,#f49b8e,#bd584d);background-image:-moz-linear-gradient(top,#f49b8e,#bd584d);background-image:-o-linear-gradient(top,#f49b8e,#bd584d);background-image:linear-gradient(#f49b8e,#bd584d)}#cssmenu ul a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);background-color:#c2c2c2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f1f1f1),color-stop(1,#a8a8a8));background-image:-webkit-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-moz-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-o-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:linear-gradient(#f1f1f1,#a8a8a8);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);color:#3c444d;font-size:12px;line-height:27px;padding:0 20px;position:relative;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.4)}#cssmenu ul ul{width:170px}#cssmenu ul ul a{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;line-height:150%}#cssmenu ul .active > a{color:#FFF;text-shadow:0 1px 0 rgba(0,0,0,0.4);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);background-color:#c46a60;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ef7260),color-stop(1,#b04c41));background-image:-webkit-linear-gradient(top,#ef7260,#b04c41);background-image:-moz-linear-gradient(top,#ef7260,#b04c41);background-image:-o-linear-gradient(top,#ef7260,#b04c41);background-image:linear-gradient(#ef7260,#b04c41)}#cssmenu ul .has-sub{position:relative}#cssmenu ul .has-sub ul{-moz-border-radius:0 3px 3px 3px;-webkit-border-radius:0 3px 3px 3px;border-radius:0 3px 3px 3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;background-color:#c3c3c3;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e9e9e9),color-stop(1,#aaa));background-image:-webkit-linear-gradient(top,#e9e9e9,#aaa);background-image:-moz-linear-gradient(top,#e9e9e9,#aaa);background-image:-o-linear-gradient(top,#e9e9e9,#aaa);background-image:linear-gradient(#e9e9e9,#aaa);padding:3px 0}#cssmenu ul .has-sub ul a{background:none;padding:8px 8px 8px 16px;border-bottom:1px solid transparent;text-align:left}#cssmenu ul .has-sub ul .has-sub a:after{content:none}#cssmenu ul .has-sub li:hover > a{border-bottom:1px solid #1D2024;color:#FFF;background-color:#55616f;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#56606f),color-stop(1,#3f4852));background-image:-webkit-linear-gradient(top,#56606f,#3f4852);background-image:-moz-linear-gradient(top,#56606f,#3f4852);background-image:-o-linear-gradient(top,#56606f,#3f4852);background-image:linear-gradient(#56606f,#3f4852);-moz-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;-webkit-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;position:relative;text-shadow:0 1px 0 rgba(0,0,0,0.4)}#cssmenu ul .has-sub li:hover > a:after{border-left:0 none;background-color:#c35f54;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ea5f51),color-stop(1,#a9463b));background-image:-webkit-linear-gradient(top,#ea5f51,#a9463b);background-image:-moz-linear-gradient(top,#ea5f51,#a9463b);background-image:-o-linear-gradient(top,#ea5f51,#a9463b);background-image:linear-gradient(#ea5f51,#a9463b);-moz-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;-webkit-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;content:'';height:100%;width:6px;position:absolute;right:0;top:0}#cssmenu ul .has-sub > a{padding-right:0}#cssmenu ul .has-sub > a:after{content:'▼';border-left:1px solid rgba(100,100,100,0.2);color:#5D6A7A;-moz-box-shadow:-1px 0 0 rgba(255,255,255,0.2);-webkit-box-shadow:-1px 0 0 rgba(255,255,255,0.2);box-shadow:-1px 0 0 rgba(255,255,255,0.2);display:inline-block;font-size:9px;margin-left:5px;text-align:center;height:25px;width:24px;text-shadow:0 -1px 0 #101417}#cssmenu ul .active > a:after{color:#FFF}#cssmenu ul ul a{font-size:12px}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Turuncu CSS3 Menu:


Oval kenarlı css3 açılır menü. Renkleri değiştirerek arzuya göre kullanılabilir. Ayrıyeten tüm menülere daha fazla açılır menü eklenebilir. Tabi bunları 'ul' kodu ile yapıyoruz.

Turuncu CSS3 drop down menu CSS kodu:

<style type="text/css">/* #F93 *//* #C60 */#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#f93;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1)}#cssmenu li{float:left;padding:0 0 0 15px}#cssmenu li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{background:#c60;color:#FFF;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}#cssmenu ul li:hover a{background:#c60;color:#FFF;text-decoration:none}#cssmenu li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#cssmenu li:hover ul{display:block}#cssmenu li li{display:block;float:none;margin:0;padding:0;width:200px;background:#f93;/*this is where the rounded corners for the dropdown disappears*/}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:50px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover a{border:0;color:#FFF;text-decoration:none;background:#c60;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Platin Sekmeli Açılır Menü:





Sekmeli menü CSS kod:

<style type="text/css">@charset 'UTF-8';/* Starter CSS for Flyout Menu */#cssmenu{padding:0;margin:0;border:0;width:auto}#cssmenu ul,#cssmenu ul li,#cssmenu ul ul{list-style:none;margin:0;padding:0}#cssmenu ul{position:relative;z-index:597;float:left}#cssmenu ul li{float:left;min-height:1px;line-height:1em;vertical-align:middle}#cssmenu ul li.hover,#cssmenu ul li:hover{position:relative;z-index:599;cursor:default}#cssmenu ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenu ul ul li{float:none}#cssmenu ul ul ul{top:1px;left:99%}#cssmenu ul li:hover > ul{visibility:visible}#cssmenu ul ul{top:1px;left:99%}#cssmenu ul li{float:none}#cssmenu ul ul{margin-top:1px}#cssmenu ul ul li{font-weight:normal}/* Custom CSS Styles */#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;padding:0 20px;text-align:center;text-decoration:none}#cssmenu a:hover{background:#f6f6f6;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative;top:0}#cssmenu ul{background:#e5e5e5;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;list-style:none}#cssmenu > ul{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=) 100% 100%;background:-moz-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e5e5e5),color-stop(100%,#ddd));background:-webkit-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-o-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-ms-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:linear-gradient(#e5e5e5 0%,#ddd 100%);box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);padding-top:5px;width:100%}#cssmenu > ul > li{float:left;padding:0 10px;position:relative}#cssmenu > ul > li:hover > a{background:#f6f6f6;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative}#cssmenu > ul > li a{line-height:35px}#cssmenu > ul > li a:hover{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#cssmenu .has-sub:hover ul{display:block}#cssmenu .has-sub a{display:block;position:relative}#cssmenu .has-sub > a:after{content:'';display:block;width:10px;height:9px;position:absolute;right:5px;top:50%;margin-top:-5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenu .has-sub ul{background:#f6f6f6;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:none;padding:10px 0;position:absolute;left:50%;top:34px;margin-left:-70px;width:140px;z-index:1}#cssmenu .has-sub ul li:hover > a{background:#ddd;color:#ae0001;border-color:#e5e5e5 transparent transparent transparent}#cssmenu .has-sub ul a{line-height:160%;padding:8px 0}#cssmenu .has-sub .has-sub a:after{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenu .has-sub .has-sub ul{background:#ddd;left:100%;top:0;margin-left:0}#cssmenu .has-sub .has-sub ul a{background:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}#cssmenu .has-sub .has-sub ul a:after{background-image:none}#cssmenu .has-sub .has-sub ul a:hover{background:#bfbfbf}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="CSS3 Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Mavi Drop Down Menü:




CSS ve HTML kod:

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);/* 2f4b87 *//* 2f4b87 *//* #1f325d *//* Menu CSS */#cssmenu{width:auto}#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{padding:0;margin:0;line-height:1;font-family:'Source Sans Pro',sans-serif;font-weight:500;font-size:16px;color:#fff;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;transition:all ease .3s}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu a{text-shadow:0 1px 1px rgba(0,0,0,0.2)}#cssmenu ul{background:#3b5998;border-radius:3px;border:1px solid #2b4479;border:1px solid #2d4373;-webkit-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-o-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-moz-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-ms-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15)}#cssmenu ul > li{float:left;list-style:none}#cssmenu ul > li > a{display:block;text-decoration:none;padding:15px 44px;position:relative}#cssmenu ul > li > a:hover{background:#2d4373;-webkit-box-shadow:inset 0 0 1px #1e2e4f;-o-box-shadow:inset 0 0 1px #1e2e4f;-moz-box-shadow:inset 0 0 1px #1e2e4f;-ms-box-shadow:inset 0 0 1px #1e2e4f;box-shadow:inset 0 0 1px #1e2e4f;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;transition:all ease .3s}#cssmenu ul > li > a:hover:before{content:'';z-index:2;position:absolute;border:1px solid white;border-top:0;border-bottom:0;border-right:0;width:100%;height:100%;top:0;left:-1px;opacity:.2}#cssmenu ul > li > a:hover:after{content:'';z-index:2;position:absolute;border:1px solid white;border-top:0;border-bottom:0;border-left:0;width:100%;height:100%;top:0;right:-1px;opacity:.2}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;position:absolute}#cssmenu > ul > li:hover > ul{opacity:1;visibility:visible;position:absolute;border-radius:0 0 3px 3px;-webkit-box-shadow:none;-o-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;box-shadow:none}#cssmenu > ul > li > ul{width:200px;position:absolute}#cssmenu > ul > li > ul > li{float:none;position:relative}#cssmenu > ul > li > ul > li > ul{opacity:0;visibility:hidden;position:absolute}#cssmenu > ul > li > ul > li:hover > ul{opacity:1;visibility:visible;position:absolute}#cssmenu > ul > li > ul > li > ul{left:200px;top:1px;width:200px}#cssmenu > ul > li > ul > li > ul > li{float:none}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Açılır Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="#"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Girintili Yatay Menü:

Bu menü stili girintili efektli olmasıdır. Açılır özelliği yoktur.



Girintili yatay menü CSS kod:

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@charset 'UTF-8';/* Base Styles */#cssmenu ul,#cssmenu li,#cssmenu a{list-style:none;margin:0;padding:0;border:0;line-height:1;font-family:'Lato',sans-serif}#cssmenu{border:1px solid #133e40;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;width:auto}#cssmenu ul{zoom:1;background:#36b0b6;background:-moz-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#36b0b6),color-stop(100%,#2a8a8f));background:-webkit-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:-o-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:-ms-linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);background:linear-gradient(top,#36b0b6 0%,#2a8a8f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color',endColorstr='@bottom-color',GradientType=0);padding:5px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}#cssmenu ul:before{content:'';display:block}#cssmenu ul:after{content:'';display:table;clear:both}#cssmenu li{float:left;margin:0 5px 0 0;border:1px solid transparent}#cssmenu li a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;padding:8px 15px 9px;display:block;text-decoration:none;color:#fff;border:1px solid transparent;font-size:16px}#cssmenu li.active{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px solid #36b0b6}#cssmenu li.active a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:block;background:#1e6468;border:1px solid #133e40;-moz-box-shadow:inset 0 5px 10px #133e40;-webkit-box-shadow:inset 0 5px 10px #133e40;box-shadow:inset 0 5px 10px #133e40}#cssmenu li:hover{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px solid #36b0b6}#cssmenu li:hover a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:block;background:#1e6468;border:1px solid #133e40;-moz-box-shadow:inset 0 5px 10px #133e40;-webkit-box-shadow:inset 0 5px 10px #133e40;box-shadow:inset 0 5px 10px #133e40}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Sekmeli Menü Chrome ve Mavi:

Sekmeli menü drop down özelliği yoktur.



Sekmeli menü CSS kod:

<style type="text/css">#cssmenu{float:left;width:100%;background:#efefef;font-size:93%;line-height:normal;border-bottom:1px solid #666}#cssmenu ul{margin:0;padding:10px 10px 0 50px;list-style:none}#cssmenu li{display:inline;margin:0;padding:0}#cssmenu a{float:left;background:url('http://3.bp.blogspot.com/-Ihp9A7IiFnI/UjqkVt0LsDI/AAAAAAAABf0/aHJ3cHr-ZF4/s1600/tableftf.gif') no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none}#cssmenu a span{float:left;display:block;background:url('http://1.bp.blogspot.com/-LyQOQD50CpU/UjqkVtk7kDI/AAAAAAAABf4/VZduGCqDHfw/s1600/tabrightf.gif') no-repeat right top;padding:5px 15px 4px 6px;color:#666}/* Commented Backslash Hack hides rule from IE5-Mac */#cssmenu a span{float:none}/* End IE5-Mac hack */#cssmenu .active a span,#cssmenu a:hover span{color:#FFF}#cssmenu .active a,#cssmenu a:hover{background-position:0 -42px}#cssmenu .active a span,#cssmenu a:hover span{background-position:100% -42px}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menu"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Turuncu Siyah Tab (sekmeli) Menü

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the lovely google font,please keep this line at the top of your stylesheet *//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(http://3.bp.blogspot.com/-q-XvJW6E8UQ/UjqlYe4p-aI/AAAAAAAABgU/30PbHrDWLyk/s1600/bottom-bg.png) repeat-x center bottom;border-radius:2px;width:auto}#cssmenu ul{background:url(http://1.bp.blogspot.com/--FRGZcIN7Ms/UjqlYSABj8I/AAAAAAAABgI/uhc6p7pzQKc/s1600/nav-bg.png) repeat-x 0 4px;height:69px}#cssmenu ul li{float:left;list-style:none}#cssmenu ul li a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 0;border-radius:2px 2px 0 0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active a{background:url(http://3.bp.blogspot.com/-b7SFqlPk6BI/UjqlYcQJAKI/AAAAAAAABgE/S2G6z7sFDyY/s1600/color.png) center bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#9b4106;text-shadow:0 1px 1px rgba(255,255,255,0.35);opacity:1}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li><a href="#"><span>Products</span></a></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Gri, Mavi, Siyah Açılır Menu:





Drop Down Menu CSS+HTML Kod:

<style type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenu li{float:left;padding:0}#cssmenu li a{background:#333 url('http://1.bp.blogspot.com/-1S2oIysWRSg/UjqX6uaD7aI/AAAAAAAABdw/uxzHTm7pPvM/s1600/seperator.gif') bottom right no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu > ul > li > a{color:#ccc}#cssmenu ul ul a{color:#ccc}#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#2580a2 url('http://1.bp.blogspot.com/-LfD4k3S234Q/UjqY7yGGUrI/AAAAAAAABeA/z3odDyDzM6Q/s1600/hover.png') bottom center no-repeat;color:#FFF;text-decoration:none}#cssmenu li ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover ul{display:block}#cssmenu li li{background:url('http://1.bp.blogspot.com/-utz_9dooZAA/UjqYpnWFcDI/AAAAAAAABd4/J5uVl-8hpfM/s1600/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#2580a2 url('http://3.bp.blogspot.com/-GHcVUbDqaCs/UjqZZY7jHWI/AAAAAAAABeI/dTI0HyyzA7Q/s1600/hover_sub.png') center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu p{clear:left}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

CSS Kırmızı Beyaz Açılır Menü:




CSS+HTML Kod:

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="http://yuksel-duman.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"></a><!-- Dont edit this CSS Drop Down Menu code --> <!-- sizin özel menü linkleriniz --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

Takıldığınız yer olursa yorum formundan sorabilirsiniz.