Php $_SERVER kullanımı

PHP kodlama yaparken Sunucu ve kullanıcı taraflı bazı bilgilere ihtiyaç duyuyoruz. $_SERVER Global’i de tam olarak bu işi yapmamıza yarıyor. Aşağıda bir liste halinde bu Global’in kullanım şekillerini yazacağım. Global Türkçe’de dizi anlamına geliyor.  Ancak bu PHP5 için.

$_SERVER[‘PHP_SELF’]   İçinde bulunduğu sayfanın site adresinden sonraki kısmını gösterir. Şöyle ki: behlul.net/google/google.php adında bir dosyada bunu çalıştırdığımızı varsayalım. Bu dizi bize /google/google.php çıktısını verecek.
$_SERVER[‘GATEWAY_INTERFACE’] Bu kod ile Cgi versiyonunu görebiliyoruz.
$_SERVER[‘SERVER_ADDR’] Bu kod komutu ile de ziyaretçinin ip adresini öğrenebiliyoruz.
$_SERVER[‘SERVER_NAME’] Site ismini verir.
$_SERVER[‘SERVER_SOFTWARE’] Sunucuda kullanılan yazılımın versiyonunu verir.
$_SERVER[‘SERVER_PROTOCOL’] Sunucuda kullanılan HTTP protokolünün versiyonunu verir.
$_SERVER[‘REQUEST_METHOD’] Sayfaye gelirken kullanılan gönderme metodunu yazdırır. Mesela POST ve GET gibi form dökümanlarımızda düşünebilirsiniz.
$_SERVER[‘REQUEST_TIME’] Sayfaya Request ile gönderilen isteğin zamanını gösterir.

Geriye kalanları da sizin demenizi rica ediyorum 🙂 Kodlama yaparken aşağıdaki örnekte olduğu gibi kullanmayı da unutmayınız.

<?php echo $_SERVER['QUERY_STRING']; ?>

$_SERVER[‘HTTP_ACCEPT’]
$_SERVER[‘HTTP_ACCEPT_CHARSET’]
$_SERVER[‘HTTP_HOST’]
$_SERVER[‘HTTP_REFERER’]
$_SERVER[‘HTTPS’]
$_SERVER[‘REMOTE_ADDR’]
$_SERVER[‘REMOTE_HOST’]
$_SERVER[‘REMOTE_PORT’]
$_SERVER[‘SCRIPT_FILENAME’]
$_SERVER[‘SERVER_ADMIN’]
$_SERVER[‘SERVER_PORT’]
$_SERVER[‘SERVER_SIGNATURE’]
$_SERVER[‘PATH_TRANSLATED’]
$_SERVER[‘SCRIPT_NAME’]
$_SERVER[‘SCRIPT_URI’]

PHP’de Server dizisi ile neler yapılabildiğini anlatmaya çalıştım. İnşallah işinize yaramıştır.

 

Web.Cab hatası çözümü

Merhabalar,

Windows 7’de kameranızın sayfasını görüntüleyip, yani ip kameralarınızı rahatlıkla izleyebiliyorken eğer Windows 8 ya da Windows 8.1 üzerinden izleyemiyorsanız karşınıa Web.Cab hatası çıkmış demektir. Öncelikle bu problem Internet Explorer 11’den kaynaklanıyor.

Benim tavsiyem başka bir tarayıcı üzerinden izlemeye çalışın. Örneğin Chrome. Ya da Windows’un en son sürümü olan Windows 10’a geçiş yapın. Yok eğer yapamıyorsanız Microsoft’un kendi sitesinde şöyle bir çözüm önermişler;

Merhaba,

 

Şu işlemleri uygulayarak Internet Explorer ayarlarınızı sıfırlayın:

  1. Açık olan Internet Explorer veya Windows Explorer pencerelerini kapatın.
  2. Başlat düğmesini tıklatarak Internet Explorer’ı açın. (Arama kutusuna Internet Explorer yazın ve ardından sonuçlar listesinde Internet Explorer’ı tıklatın.)
  3. Araçlar düğmesini ve ardından Internet Seçenekleri’ni tıklatın.
  4. Gelişmiş sekmesini ve sonra Sıfırla’yı tıklatın.
  5. Gözatma geçmişini, arama sağlayıcılarını, Hızlandırıcıları, giriş sayfalarını ve InPrivate Filtreleme verilerini kaldırmak istediğinizde Kişisel ayarları sil onay kutusunu seçin.
  6. Internet Explorer Ayarlarını Sıfırla iletişim kutusunda Sıfırla’yı tıklatın.
  7. Internet Explorer ayarları geri yüklemeyi tamamladığında, Kapat’ı ve ardından Tamam’ı tıklatın.
  8. Internet Explorer’ı kapatın. Yaptığınız değişiklikler Internet Explorer’ı bir sonraki açışınızda uygulanacaktır.

 

Sorun devam ederse, Internet Explorer açıkken klavyenizde F12 tuşuna basın (veya menü çubuğunda “Araçlar > F12 geliştirici araçları”nı açın), ekranın alt kısmında açılan menüde Öykünme seçeneğini tıklayın ve “Kullanıcı aracısı dizesi” özelliğini önceki bir Internet Explorer versiyonuna çekerek durumu test edin. Sorun yaşanmaz ise, ilgili arayüz Internet Explorer 11 ile uyumlu hale getirilene kadar bu şekilde kullanabilirsiniz.

 

İyi çalışmalar.

Websitesi ve Resim sıkıştırma

Bu aralar yaptığım bir site nedeniyle hız problemi yaşadım. Bu problemi aşmak için hayli kafa yordum ve nihayetinde bir çok yöntem uyguladım. Bu sorunlar eminim bir çoklarının karşısına çıkıyordur. Bunun için kendimin de kullandığı basit ama etkili çözüm yollarını anlatmaya çalışıyorum.

Bu işlem çok basit olup eğer sunucunuzda mod_gzip açıksa .htaccess dosyası ile çok basit bir şekilde yapabiliyorsunuz.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Bu kodu sitenizde kullandığınız anda tüm verileriniz ziyaretçilere gösterilirken otomatik olarak gziplenmiş yani sıkıştırılmış olacak. Böylelikle hem siteniz hızlı açılacak hem de google gibi arama motorları bu tip sıkıştırmaları destekliyor.

Yeni basit ama işinizi fazlasıyla göreceğine inandığım bir bilgiyi paylaştığıma inanıyorum. İnşallah çok yorulmamışsınızdır.

Php’de Pratik Cache/Önbellekleme Yapımı

Son zamanlarda çokça karşıma çıkıyordu sitenizin bir önbelleklemesi yok diye. Tabi WordPress gibi hazır sistemlere yüzlerce, binlerce uygulama geliştirilirken biz kendi yazdığımız sistemlerde bir başımayız. Bunun için çok fazla vakit harcamadan size hem basit hem de işinizi fazlasıyla gören bir Cache/Önbellekleme kodu vereceğim. Kod ile ilgili detaylara fazla giremeyeceğim ancak zaten basit yapısından az çok sizde anlayabilirsiniz.

<?php 

class Cache
{
    public $start_time;
    public $cache_file;
    public $to_create;

    function __construct()
    {
        $this->to_create = TRUE;
        $this->Start();
    }

    function Start()
    {
        $this->start_time = microtime();
        $cache_time = 60; // önbelleklenen dosyanın kullanılma süresi
        $str = $_SERVER['REQUEST_URI'];

        foreach ($_GET as $k => $v)
            $str .= $k . $v;

        foreach ($_POST as $k => $v)
            $str .= $k . $v;

        $this->cache_file = $_SERVER['DOCUMENT_ROOT'] . "/cache/" . md5($str) . ".html";
        if (file_exists($this->cache_file) && (time() - $cache_time < filemtime($this->cache_file)))
        {
            include($this->cache_file);
            $end_time = microtime(); 
            $this->to_create = FALSE;
            exit;
        }

        ob_start();
    }

    function End()
    {
        $fp = fopen($this->cache_file, 'w');
        fwrite($fp, ob_get_contents());
        fclose($fp);
        ob_end_flush();
        $end_time = microtime();
    }

    function __destruct()
    {
        if ($this->to_create)
            $this->End();
    }
}

$cache = new Cache();

?>

Burada önemli olan iki yerin altınızı çiziyorum ve nasıl yapacağınızı anlatıyorum.

1- Önbellekleme süresi

$cache_time = 60; // önbelleklenen dosyanın kullanılma süresi

burada $cache_time yazan yerde önbellekleme süresini saniye cinsinden belirtiyoruz. Önbellekleme süresini dilerseniz uzatabilirsiniz.

2- Önbellekleme yapılacak klasör ismi: cache

        $this->cache_file = $_SERVER['DOCUMENT_ROOT'] . "/cache/" . md5($str) . ".html";

Burada cache yapmak istediğiniz klasörün adını değiştirebilirsiniz.

Kullanımı:

Öncelikle yukarıda yer alan kodu cache.php diye bir dosya içine kaydedin. Ardından bu cache.php’yi tüm sayfalarda çağırın. Eğer veritabanı için herhangi bir bağlantı dosyası çekiyorsanız direk onun içine de çağırabilirsiniz.  include(‘cache.php’);  gibi…

Daha sonrasında site dizininize, site dosyalarınızın olduğu yere yani cache adında bir klasör oluşturun. Eğer altını çiziyorum dediğim 2. yerdeki cache klasör ismini değiştirdiyseniz oluşturacağınız klasörü o isimle adlandırmak zorundasınız. Burada cache klasörünün içinde .html cinsinden otomatik oluşturulmuş sayılarla sitenin bir yansısı oluşturuluyor.

Basitçe özet geçeyim ki kafalar karışmasın.

1- Yukarıdaki kodla cache.php adında bir dosya oluşturuyoruz. Bunu tüm sayfalara include yöntemi ile çekiyoruz.

2- Cache adında bir klasör oluşturuyoruz.

Kolay gelsin buna da geçmiş olsun 🙂

 

Adam Gibi 301 yönlendirmesi

Selamun Aleykum

Google Webmasters tools ya da yeni adıyla Search Console kullanıyorsanız www.siteadi.com http://siteadi.com tamamıyla farklı sitelerdir vs. gibisinden bir uyarı görürsünüz.

Bir çok Seo analiz motorunda da karşınıza sürekli 301 yönlendirmesi yok diye uyarı gelir. Yeni bir site açıp yönlendirmekten ziyade bu arama motorları ile ilgili çalışma yaparken sürekli karşımıza çıkan bu hatayı düzeltmek üzere çok basit bir .htaccess kodu vereceğim.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.siteadi\.com$
RewriteRule ^/?$ "http\:\/\/siteadi\.com\/" [R=301,L]

Şimdi normalde .htaccess dosyası ile sitenizde yönlendirmeler yapıyorsanız zaten RewriteEngine on kısmı eklidir. Yani örnek veriyorum index.php yerine index.html görünsün gibi SEF yapısı kullanıyorsanız tekrar eklemenize gerek yok.

Kafanıza takılan bir şey olursa yine yazarsınız.

Php İlk Harfleri Büyük Yapma

İnşallah burayı çabuk bulmuşsunuzdur. Uğraşmadan, sunucularda mb_strtolower’u nasıl aktif ederim diye cedelleşmeden gelmişsinizdir. Muhtemelen sadece ucwords Türkçe karakterlerin küçültülmesinde sıkıntı çıkardığı için böyle bir araştırmaya girmişsinizdir. Nerden biliyorum? Çünkü hepsini yapmak zorunda kalmıştım 🙂 Neyse fazla gevezelik etmeden konuya girelim.

Mesela MySQL veritabanından çektiğiniz verilerinizin tamamı büyük harfli. Bu en zor olanı olduğu için bunu örneklendiriyorum. Ve siz ilk harflerin büyük diğer harflerin küçük olmasını istiyorsunuz. Öncelikle bir fonksiyon oluşturacağız. Fonksiyonumuz Türkçe karakterlerimizi küçültecek, ardından tüm karakterleri küçülttüğümüz ve baş harflerini büyüttüğümüz bir yapı oluşturacağız. Kodu vereyim de siz en iyisi bi’ deneyin 🙂

<?
function kucult($cumle){
$kucuk=array('i','ı','ğ','ö','ü','ş','ç');
$buyuk=array('İ','I','Ğ','Ö','Ü','Ş','Ç');
$cumle=str_replace($buyuk,$kucuk,$cumle);
$cumle=ucwords(strtolower($cumle));

return $cumle;
}
?>

Bu fonksiyonu çekmek istediğimiz sayfada iste şöyle yapıyoruz.

<?
/** Veri çektiğiniz kodlar burada(burayı siz biliyorsunuz ben bilmiyorum :)) **/
kucult($makalebaslik);
?>

Ve artık ilk harflerimiz büyük ve diğer harflerimiz küçük bir veri elde ediyoruz. Deneyin, sıkıntı çıkarsa yazın lütfen.

Laptop/Dizüstü Bilgisayarlarda Shift Tuşu

İnsanlar teknoloji ile karşılaştıklarında ister istemez belirli bir dönemden geçtikten sonra yeterince bilgi sahibi olup, teknolojik aletlerini daha iyi kullanabiliyorlar. Her kullanıcı her şeyi bilecek diye bir şey yok.

Esasında basit ama insan bilmediği zaman bir o kadar da zor olan Shift tuşunun yeri meselesi.

Shift tuşunun laptoplarda fotosu(Yukarıya doğru bir ok simgesidir.) :

shift

Shift tuşunun videosu:

Şift tuşunun ne işe yaradığını merak ediyorsanız bu yazıya tıklayınız. 

 

Shift Tuşu Ne İşe Yarar?

Shift tuşunun ilk kullanım alanı harflerin büyük yazılmasıdır. Shift tuşuna basılı tutarken herhangi bir harfe basarsanız o harf büyük yazar. Deneyerek görebilirsiniz.

Eğer şift tuşunuz çalışmıyorsa buraya tıklayınız. 

Shift tuşu ayrıca ikincil karakterler denen genelde klavyelerde sayıların bulunduğu alanda yer alan sayıların hemen sol veya sağ üstteki simgelerin çıkmasını sağlar. Mesela +(artı) işareti yapmak istiyorsunuz. Bunun için önce Shift tuşuna basıyorsunuz ve bir parmağınız shift tuşuna basılıyken 4 sayısına basıyorsunuz. Böylelikle + işaretini elde etmiş olursunuz.

Ünlem ! (Shift + 1),
Kesme İşareti ‘ (Shift + 2),
Şapka (düzeltme/inceltme/uzatma) ^ (Shift ile önce 3’e ardından da sesli harflerden birine basarsanız işaret gelir. Yalnız başına göstermek istiyorsanız Shift tuşu basılıyken 3’e iki kere basmanız gerekmektedir. )
Artı + (4),
Yüzde % (Shift + 5),
Ve/And & (Shift + 6),
Bölü/Taksim/Slash / (Shift + 7),
Yayayraç/Parantez Açma “(” (Shift + 8),
Yayayraç/Parantez Kapama “)” (Shift + 9),
Eşittir = (Shift + 0)
Soru İşareti ? (Shift + * yani 0’ın hemen sağı.)
Tre/Orta Çizgi – (Shift + 0’ın iki sağında)

Ayrıca Shift, şift diye okunur 🙂 Allah’a emanetsiniz, Selametle.

 

CSS ile Çarpık Foto Galeri

CSS website tasarımlarımızda iskelet yapımızı şekillendirdiğimiz kodlama dilimiz. Esasında ufak kod bilgileriyle çok hoş görüntüler elde edebilir ziyaretçilerinize bunları değişik tarzlarda sunabilirsiniz.

Bunlardan basit bir örnek vereceğim.

Demosu şurda: Çarpık Galeri Demo

Stil bilgilerini index dosyası içerisinde head tagları içerisinde gösteriyorum. Çok fazla bir kod ihtiyacı yok.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>CSS ile Çarpık Foto Galeri </title>

<style type="text/css">

* { margin: 0; padding: 0; border: 0; }



#container {
  width: 600px; margin: 40px auto;
}

h1 {
  font: bold 65px/60px Helvetica, Arial, Sans-serif;
  text-align: center; color: #eee;
  text-shadow: 0px 2px 6px #333;
}

h2 a {
  display: block; text-decoration: none; margin: 0 0 30px 0;
  font: italic 45px Georgia, Times, Serif; 
  text-align: center; color: #bfe1f1;
  text-shadow: 0px 2px 6px #333;
}
  h2 a:hover {
    color: #90bcd0;
  }

ul.gallery { 
  list-style: none;
}
ul.gallery li a {
  position: relative;
  float: left;
  padding: 10px 10px 25px 10px;
  background: #eee;
  border: 1px solid #fff;
  -moz-box-shadow: 0px 2px 15px #333;
}
  
  ul.gallery li a.pic-1 {
    z-index: 1;
    -webkit-transform: rotate(-10deg);
 		-moz-transform: rotate(-10deg);
  }
  ul.gallery li a.pic-2 {
    z-index: 5;
    -webkit-transform: rotate(-3deg);
 		-moz-transform: rotate(-3deg);
  }
  ul.gallery li a.pic-3 {
    z-index: 3;
    -webkit-transform: rotate(4deg);
 		-moz-transform: rotate(4deg);
  }
  ul.gallery li a.pic-4 {
    z-index: 4;
    -webkit-transform: rotate(14deg);
 		-moz-transform: rotate(14deg);
  }
  ul.gallery li a.pic-5 {
    z-index: 2;
    -webkit-transform: rotate(-12deg);
 		-moz-transform: rotate(-12deg);
  }
  ul.gallery li a.pic-6 {
    z-index: 6;
    -webkit-transform: rotate(5deg);
 		-moz-transform: rotate(5deg);
  }
  
  ul.gallery li a:hover {
    z-index: 10;
    -moz-box-shadow: 3px 5px 15px #333;
  }


</style>

</head>

<body>

<div id="container">
  <h1>CSS ile Çarpık Foto Galeri</h1>
  <h2><a href="http://behlul.net">Behlul.net</a></h2>
  
  <ul class="gallery">
    <li><a href="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="1.jpg" alt="alt 1">         </a></li>
    <li><a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="2.jpg" alt="alt 2"></a></li>
    <li><a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="3.jpg" alt="alt 3"></a></li>
    <li><a href="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"><img src="4.jpg" alt="alt 4"></a></li>
    <li><a href="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5"><img src="5.jpg" alt="alt 5"></a></li>
    <li><a href="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"><img src="6.jpg" alt="alt 6"></a></li>
  </ul>

</div>



</body></html>

Kodu oluşturacağınız bit html dosyasının içerisine kopyalayıp yapıştırınız. Ardından istediğiniz stil değişikliklerini uygulayabilirsiniz. CSS’te bir çok öğe üzerinde çalışırken bize katmanlı bir yapı sunduğu için ul ve li taglarını kullanıyoruz. Burada da yine aynı şekilde ul ve li kullanıldı.

Ancak illa ul ve li kullanılma gibi bir mecburiyet var mı? Tabi ki yok. İstersek kendi oluşturacağımız class’ları dilediğimiz divlere atayabilirdik.

Denersiniz, eğer herhangi bir problemle karşılaşır veya soru sormak isterseniz yorum kısmından yazabilirsiniz.

İyi çalışmalar.

CSS Açılır Menü

Javascriptler hayatımıza kolaylıklar getirmiş olsa da hala CSS ile yapılabilecek bir çok şey var. Özellikle CSS3 ile hiç bir javascript kodu kullanmadan önemli içerik öğelerini yapabiliyoruz.

Bunlardan biri olan açılır menüye değineceğim. Bunun İngilizce hazırlanan bir demosuna bakmak için şurayı ziyaret edebilirsiniz.

İlk olarak index.html ve style.css adında iki dosya oluşturuyoruz.

Öncelikle bir Html veya hangi dili kullanıyorsak sayfamızın başına oluşturacağım stil dosyasını çekiyoruz. Ben html üzerinden anlatmaya devam ediyorum.

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

Burada <link diye yazdığımız kısım style dosyamızı çektiğimiz kısım. Stil dosyası ile index.html

 

Ardından index.html dosyamıza girerek Menülerimizde yer alacak öğeleri giriyoruz. Bu çalışma için 3 kademeli bir menü yapıyoruz.

<div id="container">
    <h1>CSS Açılır Menü</h1>

        <nav>
            <ul class="clearfix">
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Hakkımızda</a>
                <ul>
                    <li><a href="#">Altmenü 1</a></li>
                    <li><a href="#">Altmenu 1</a></li>
                    <li><a href="#">Altmenü 1</a></li>
                </ul>        
                </li>
                <li><a href="#">Tasarım</a>
                <ul>
                    <li><a href="#">Kaynaklar</a></li>
                    <li><a href="#">Linkler</a></li>
                    <li><a href="#">Dersler</a>
                    <ul>
                        <li><a href="#">HTML/CSS</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">PHP</a>
                            <ul>
                                <li><a href="#">Alt Menü 2</a></li>
                                <li><a href="#">Alt Menü 2</a></li>
                                <li><a href="#">Alt Menü 2</a></li>
                            </ul>
                        </li>
                    </ul>
                    </li>
                </ul>
                </li>
                <li><a href="#">Grafik Tasarım</a></li>
                <li><a href="#">İletişim</a></li>
                <li><a href="#">Hakkımızda</a></li>
            </ul>
        </nav>
</div>

Burada önemli olan kısmı kısaca izah etmeye çalışayım.

Nav ismi ile oluşturduğumuz divimizin içerisinde listeleme tagı olan <ul> ile başlıyoruz ve iç kısmında <li> ile üstte görünecek menü başlıklarımızı giriyoruz. Alt menüsü olmayan bir menü öğesini şu şekilde oluşturuyoruz.

<li><a href="#">Üstmenü</a></li>

Eğer bir üst menüye alt menü oluşturacak olursak <li> tagını kapatmıyoruz ve alt menümüzü oluşturuyoruz.

<li><a href="#">Hakkımızda</a>
<ul>
    <li><a href="#">Altmenü 1</a></li>
    <li><a href="#">Altmenu 1</a></li>
</ul>
</li>

 

Menülerimizi oluşturduktan sonra index.html dosyamızı kaydediyor ve style.css dosyamıza geçiyoruz.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
  background: #212121;
  font-size:22px;
  line-height: 32px;
  color: #ffffff;
  word-wrap:break-word !important;
  font-family: 'Open Sans', sans-serif;
  }

h1 {
  font-size: 60px;
  text-align: center;
  color: #FFF;
}	

h3 {
  font-size: 30px;
  text-align: center;
  color: #FFF;
}

h3 a {
  color: #FFF;
}

a {
  color: #FFF;
}

h1 {
  margin-top: 100px;
  text-align:center;
  font-size:60px;
  font-family: 'Bree Serif', 'serif';
  }

#container {
  margin: 0 auto;
  max-width: 890px;
}

p {
  text-align: center;
}


nav { 
  margin: 100px 0;
  background-color: #E64A19;
}


nav:after {
  content:"";
  display:table;
  clear:both;
}

nav ul {
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  }

nav ul li {
  margin: 0px;
  display:inline-block;
  float: left;
  background-color: #E64A19;
  }

nav a {
  display:block;
  padding:0 10px;	
  color:#FFF;
  font-size:20px;
  line-height: 60px;
  text-decoration:none;
}

nav a:hover { 
  background-color: #000000; 
}


nav ul ul {
  display: none;
  position: absolute; 
  top: 60px; 
}
  

nav ul li:hover > ul {
  display:inherit;
}
  

nav ul ul li {
  width:170px;
  float:none;
  display:list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top:-60px;
  left:170px; 
}

  
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

style.css dosyamız bu şekilde olacak.

 

Stil dosyamızda en önemli kısımlar nav clası içerisinde ul ve li işlemleri.

Biz şimdi en dışa nav diye bir class oluşturmuştuk index.tml dosyamızda. Bu yüzden nav’ın stil işlemlerini yaptık.

Ardından nav  > ul > li şeklinde ilk menümüzün stillerini oluşturduk. Alt menü için ise index.html dosyamızda tanımladığımız sıralama nedeniyle nav > ul > li > ul > li şeklinde bir stillendirme işlemi yaptık.

Dosyaları kaydedip deneyiniz. Kafanıza takılan herhangi bir sorun olursa yorum kısmından yazabilirsiniz. Fazla bir detaya giremiyorum. Soru cevap şeklinde detaylandırma yapabiliriz. Ancak html ve css konusunda az çok temelinizin olması gerektiğini unutmayınız.