Problem s hoover menu

<div class="menudiv">
<font class="menufont">
<ul id="hlavniMenu"> 


<li><a href="">TEMA</a> 
<ul> 
<li><a href="">Pododkaz 11</a></li> 
<li><a href="">Pododkaz 12</a></li> 
<li><a href="">Pododkaz 13</a></li> 
</ul> 
</li> 

<li><a href="">TEMA</a> 
<ul> 
<li><a href="">Pododkaz 21</a></li> 
<li><a href="">Pododkaz 22</a></li> 
<li><a href="">Pododkaz 23</a></li> 
</ul> 
</li> 

</ul>

</font>

</div>

ul#hlavniMenu 
{ 
position:absolute; left: 0px;
width:150px; 
height: 25px;

} 

ul#hlavniMenu, ul 
{ 
padding:0; 
margin:0; 
list-style-type:none; 
} 

ul#hlavniMenu ul 
{ 
position:absolute; 
top:0; 
left:150px; 
visibility:hidden; 
} 

ul#hlavniMenu li 
{ 
position:relative; 
width:150px; 
height: 35px;
} 


ul#hlavniMenu a 
{ 
background-image: url('Tlacitko.bmp'); 
height:30px;
margin-left:0px;
color:Black; 
display:block; 

text-decoration:none; 

width:100%; 
} 

ul#hlavniMenu a:hover, ul#hlavniMenu li:hover a, ul#hlavniMenu li.hover a 
{ 
background-image: url('Tlacitkohoover.bmp'); 
color:White; 
text-decoration:underline; 
} 

ul#hlavniMenu li:hover ul a, ul#hlavniMenu li.hover ul a 
{ 
background-image: url('Tlacitkohoover.bmp'); 
color:red; 
} 

ul#hlavniMenu li:hover ul a:hover, ul#hlavniMenu li.hover ul a:hover 
{ 
background-color:black; 
color:white; 
} 

ul#hlavniMenu li:hover ul, ul#hlavniMenu li.hover ul 
{ 
visibility:visible; 
} 

ul#hlavniMenu li li 
{ 
border:none; 
padding:0; 
background-color:white; 
} 

ul#hlavniMenu li 
{ 
behavior: url(hover.htc); 
}