En basit ve sorunsuz şekli ile açılır bir menü hazırlıyacağız. Sadece CSS ve HTML ile oluşturacağımız bu menünün en güzel tarafı tüm tarayıcılarda sorunsuz bir şekilde çalışacak olması. Hemde bunları yaparken hiç javascript kullanmayacağız . Bir ay kadar önce internette bir örneğine rastlamıştım. Şirket içi Proje için basit bir menüye ihtiyacım olunca bu yöntem geldi aklıma.

Öncelikle menümüzün HTML kısmını hazırlayalım.

Menümüzde önemli nokta, iç içe geçmiş

etikleri. Önce yatay bir menü hazırlıyoruz.

<ul id="menu">
	<li><a href="#">Anasayfa</a></li>
	<li> <a href="#">Madde 1</a></li>
	<li> <a href="#">Madde 2</a></li>
</ul>

Anasayfa’nın altında herhangi bir link olmayacağı için Madde 1 ile açılır menümüzü hazırlamaya başlıyoruz.
<li> etiketi altına bir tane
<ul> etiketi açıyoruz. Bu etiket içerisine açılacak menüyü yerleştireceğiz. Şimdi Madde 1′in altında açılacak olan menümüzün kodlarını yazalım.

<li> <a href="#">Madde 1</a>
	<ul>
		<li><a href="#">Madde 1-1</a></li>
		<li><a href="#">Madde 1-2</a></li>
	</ul>
</li>

Peki bu menü nasıl açılacak? Bu açılma ve tekrar kapanma işlemlerini CSS ile yapacağız. ID’si “menu” olan ul etikenine ait li etiketlerinin içerisinde yer alan ul etiketlerinin varsayılan(default) display değerini “none” olarak belirliyoruz. Tek cümlede anlatınca biraz karışık olduğunu biliyorum o yüzden bir çizim ile bunu anlatarak pekiştirelim.

Bu grafiğe ait olan CSS kodlarını yazalım. Yukarıdada belirttiğim gibi <li> içindeki etiketinin değerini atayacağız.

ul#menu li ul{
display:none;
border:solid 1px #ccd6e5;
padding:0px;
margin-left:-10px;
padding-bottom:5px;
}

Yukarıda stil olarak vermiş olduğumuz kodları geçersek ilk sırada yer alan “display:none;” koldarı bizim işimizi gören kısım. Şimdi en işlevsel kısıma geldik. Bu alt menümüz ne zaman açılacak. Genel olarak “<a” etiketlerinde kullanılan “hover” özelliğini kullanacağız. Yani “li:hover” da altındaki “ul” etiketinin display özelliğini “block” yapacaz.

Şimdi CSS kodlarını yazalım :

ul#menu li:hover ul{
display:block;
position:absolute;
width:150px;
background:#fff;
}