MENÜ HTML KODLARI
<div id="header_menu">
<ul>
<li> <a href="index.php"> <i class="fa fa-home"></i> Anasayfa</a> </li>
<li> <a href="hakkimizda.php"> <i class="fa fa-info-circle"></i> Hakkımızda</a> </li>
<li> <a href="#"> <i class="fa fa-shopping-bag"></i> Ürünlerimiz</a>
<ul>
<li> <a href='#'>Bilgisayar</a>
<ul>
<li> <a href='#'>Dizüstü</a></li>
<li> <a href='#'>Masaüstü</a></li>
</ul>
</li>
<li> <a href='#'>Cep Telefonu</a></li>
<li> <a href='#'>Televizyon</a>
<ul>
<li> <a href='#'>Led TV</a></li>
</ul>
</li>
<li> <a href='#'>Ütü</a></li>
</ul>
</li>
<li> <a href="#"> <i class="fa fa-user-plus"></i> Üyelik</a>
<ul>
<li> <a href="#">Üye Ol</a> </li>
<li> <a href="#">Üye Girişi</a> </li>
<li> <a href="#">Sepetim</a> </li>
<li> <a href="#">Profil</a> </li>
</ul>
</li>
<li> <a href="#"> <i class="fa fa-file-text-o"></i> Mesaj Formu</a> </li>
<li> <a href="#"> <i class="fa fa-phone"></i> İletişim</a> </li>
</ul>
</div>
-----------------------
MENÜ CSS KODLARI
#header_menu {
float:right;
margin-top:21px;
}
#header_menu > ul > li {
float:left;
position:relative;
margin-left:3px;
}
#header_menu > ul > li > a {
color:#333;
text-decoration:none;
font-weight:bold;
line-height:30px;
display:block;
padding:0 5px;
}
#header_menu > ul > li > a:hover, #header_menu > ul > li:hover a {
background-color:#f89406;
color:#FFF ;
}
#header_menu > ul > li > ul {
display:none;
position:absolute;
padding-top:5px;
z-index:1;
}
#header_menu ul li:hover > ul {
display: block;
}
#header_menu ul li ul a {
background-color:#f89406;
color:#FFF;
width:180px;
display:block;
line-height:25px;
margin-bottom:2px;
padding-left:5px;
text-decoration:none;
font-weight:bold;
transition:ease 0.5s;
}
#header_menu ul li ul a:hover {
background-color:#222;
color:#FFF;
}
#header_menu ul li ul li {
position:relative;
}
#header_menu ul li ul li ul {
position:absolute;
left:185px;
padding-left:3px;
top:0;
display:none;
}