css açılır menü sorunum yardım !

<div id="menu">
  
  <ul class="menu">
  
<ul>
<li><a href=”anasayfa.html”>Anasayfa</a></li>
<li><a href=”hakkimizda.html”>Hakkımızda</a>
<ul>
<li><a href=”kalite.html”>Kalite Politikamız</a></li>
<li><a href=”insankaynaklari.html”>İnsan Kaynakları</a></li>
</ul>
</li>
<li><a href=”#”>Hizmetlerimiz</a>
<ul>
<li><a href=”tasarim.html”>Tasarım</a></li> 
<li><a href=”grafik.html”>Grafik</a></li>
<li><a href=”reklamcilik.html”>Reklamcılık</a></li>
</ul>
</li>
<li><a href=”referans.html”>Referanslarımız</a></li>

<li><a href=”iletisim.html”>İletisim</a></li>
</ul>
  
  
  </div>

<style type="text/css">
.menu ul {
	margin: -16px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
}
.menu ul li {
	float: left;
	height: 54px;
	width: 150px;
	position: relative;
	background-color: #000;
	font-family: Arial, sans serif;
	padding: 3px;
}
.menu ul li a {
	height: -65px;
	display: block;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	padding-left: 10px;
	line-height: 30px;
	font-size: 14px;
}
.menu li a:hover {
height: -65px;
display: block;
font-weight: normal;
color: #FFFFFF;
text-decoration:none;
padding-left: 10px;
line-height: 30px;
background-color:#333;
font-size:14px;
}
.menu ul li ul {
position: absolute;
left: 10px;
top: 50px;
display: none;
}
.menu ul li:hover ul {
display: block;
z-index: 1;
}



a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>