problema com menu css

olá não estou consiguindo fazer o sub-menu acompanhar o menu de qual ele pertence alguem poderia me ajuda tranks...

/applications/core/interface/imageproxy/imageproxy.php?img=http://img844.imageshack.us/img844/8752/errs.jpg&key=f280a148998f2fe97d6332830e373b124d10f6fb587c80debd8d9dbaae3016f1" alt="errs.jpg" />

http://img844.imageshack.us/i/errs.jpg

HTML

<div id="menu">
	<ul>
 <li><a href="#">Home</a>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Equipe</a></li>
 <li><a href="#">Contatos</a></li>
 </ul></li>
 <li><a href="#">Equipe</a>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Equipe</a></li>
 <li><a href="#">Contatos</a></li>
 </ul></
 </li>
 <li><a href="#">Contatos</a>
 </li>
 </ul>
	</div>

CSS

#menu ul{

list-style:none;
margin:0 auto;
position:relative;
}

#menu li{

width:100px;
float:left;
}

#menu li a{

margin-top:2px;
display:block;
float:left;
padding:0px 15px;
height:25px;
line-height:25px;
text-decoration:none;
color:#333;
border:none;
}

#menu li a:hover{

margin-top:2px;
background-image:url(images/menu_sidebar_botton.jpg);
}

#menu li:hover ul{

display:block;
}

#menu li ul{

margin:0 auto;
display:none;
float:left;
position:absolute;
top:25px;
left:0;
width:150px;
background:#333;
}

#menu li ul a{

margin-top:1px;
display:block;
float:left;
padding:0px 30px;
height:25px;
line-height:25px;
text-decoration:none;
color:#00FF00;
border:none;
}