<div id="yatay-menu">
	<ul>
		<li> <a href="#" OnMouseOver="javascript:altmenu(1)" >Ana Sayfa</a> </li>
		<li> <a href="#" OnMouseOver="javascript:altmenu(2)" >Kullanıcı</a> </li>
		<li> <a href="#" OnMouseOver="javascript:altmenu(3)" >Topluluk</a> </li>
		<li> <a href="#" OnMouseOver="javascript:altmenu(4)" >Yardım</a> </li>
	</ul>
</div>
 
<div id="alt-menuler">
	<ul id="alt-1">
		<li><a href="#">Genel</a></li>
		<li><a href="#">Haberler</a></li>
	</ul>
 
		<ul id="alt-2">
		<li><a href="#">Giriş Yap</a></li>
		<li><a href="#">Kayıt Ol</a></li>
	</ul>
 
	<ul id="alt-3">
		<li><a href="#">Blog</a></li>
		<li><a href="#">Forum</a></li>
		<li><a href="#">Facebook</a></li>
	</ul>
 
	<ul id="alt-4">
		<li><a href="#">Yardım Konuları</a></li>
		<li><a href="#">Kullanım Şartları</a></li>
		<li><a href="#">Hakkında</a></li>
	</ul>
</div>

* {/* Tarayıcılardan kaynaklanan farklılıkları yok etmeye çalışıyoruz */
	padding: 0;
	margin: 0;
}
 
body {
	font-family:Arial, Helvetica, sans-serif;/* Fontumuzu belirtiyoruz */
	font-size: 16px;/* Font boyutunu 16px olarak ayarlıyoruz */
	font-weight: bold; /* Yazılar kalın olsun */
}
 
#yatay-menu {
	background-image: url(imajlar/menu_arkaplan.png); /*Arkaplan dosyamızı gösteriyoruz */
	background-repeat: repeat-x; /*Arkaplan yatay eksen boyunca tekrar etsin */
	/* Bu kısayoluda kullanabilirsizi:
	background: url(menu_arkaplan.png) repeat-x; */
 
 
	height: 61px;/*Menü yüksekliğimiz... 61px olmasının nedeni arkaplanın da yüksekliğinin 61px olmasıdır.*/
	line-height: 61px;/* Yazıları ortalıyoruz. */
}
 
	#yatay-menu ul {
		list-style: none;/*Listeleme stili kullanma!*/
	}
 
	#yatay-menu li {
		display: inline; /* Tümünü aynı satırda (yatayda) göster*/
	}
 
	#yatay-menu a {
		color: #666; /* Link rengimiz */
		text-decoration: none; /* Altıçizili olmasın */
		padding: 21px;
	}
 
	#yatay-menu a:hover {/* Üzerine gelinen linkler... */
		background-image: url(imajlar/link_arkaplan.png);
		background-repeat: repeat-x;
		color: #fff;
	}
 
 
#alt-menuler { /* Altmenüyü şekillendiriyoruz */
	background: #cc0000 url(imajlar/alt-menu-arkaplan.png) repeat-x;
	padding: 5px;
}
 
	#alt-menuler ul { /* Liste stili yok */
		list-style: none;
	}
 
	#alt-menuler li {/* Linkleri aynı satırda göster */
		display: inline;
	}
 
	#alt-menuler a {/* Altmenü linklerinin stilini ayarlıyoruz */
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		margin-left: 20px;
	}
 
	#alt-menuler a:hover {
		text-decoration: underline;
	}
 
	#alt-2, #alt-3, #alt-4 {/*Başlangıçta diğer altmenüleri gösterme! */
		display: none;
}

function altmenu(kimlik_no)
{
	menu = document.getElementById('alt-'+kimlik_no); //eleman alınıyor...
	for(Int=1; Int<=4; Int++) // toplam 4 adet alt menümüz vardı
	{
		if (Int == kimlik_no) // eğer kimliği verilen eleman bu ise onu göster
		{
			menu.style.display="block"; // ...
		}
		else
			document.getElementById('alt-'+Int).style.display="none"; //diğerlerini gizle
	}
}