Problèmes avec un menu déroulant

Bonsoir ;

J'ai entrepris de créer un petit site WEB. Etant plus caler en photoshop qu'en code j'ai réaliser toute ma maquette graphique sur photoshop que j'ai directement balancer dans dreamweaver Tout est au bon endroit voici un aperçu : www.clickdl.fr

La ou ça complique c'est pour faire un menu déroulant en dessous du bouton "portfolio" j'ai pourtant suivi un tuto a la lettre mais je pense mes <div> pose problème comment faire ? SVP

Voici le code :

</div>
<div class="Tableau_01">
    <div class="Home4-03">
    <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/Home5_03.png',1)"><img src="images/Home4_03.png" width="100%" height="100%" id="Image10"></a> </div>
	<div class="ac">
		<a href="http://facebook.com"><img src="images/ac.png" onMouseOver="javascript:this.src='images/acsu.png'" onMouseOut="javascript:this.src='images/ac.png'" width="100%" height="100%">
	</div>
    
    
<ul class="menu">
    <div class="po">
		<li><a href="http://facebook.com"><img src="images/po.png" onMouseOver="javascript:this.src='images/posu.png'" onMouseOut="javascript:this.src='images/po.png'" width="100%" height="100%"></a>
	</div>
<ul>
    <li><div class="pade">
		<a href="http://facebook.com"><img src="images/pade.png" width="100%" height="100%"></a>
	</div></li>
    <li><div class="urde">
		<a href="http://facebook.com"><img src="images/urde.png" width="100%" height="100%"></a>
	</div></li>
    <li><div class="ande">
		<a href="http://facebook.com"><img src="images/ande.png" width="100%" height="100%"></a>
	</div></li>
    <li><div class="bode">
		<a href="http://facebook.com"><img src="images/bode.png" width="100%" height="100%"></a>
	</div></li>
    <li><div class="made">
		<a href="http://facebook.com"><img src="images/made.png" width="100%" height="100%"></a>
	</div></li>
    <li><div class="rede">
		<a href="http://facebook.com"><img src="images/rede.png" width="100%" height="100%"></a>
	</div></li>
    <li><div class="cade">
		<a href="http://facebook.com"><img src="images/cade.png" width="100%" height="100%"></a>
	</div></li>
</ul>
        </li>
</ul>
    
    <script src="jquery.js"></script>
    <script>
    
   
   $(document).ready(function(){
	   
	   
	   $('.menu li').hover(function(){
		  
		  $('ul:first',this).slideDown();
	   
    },function(){
		  $('ul:first',this).slideUp();
		});
});
   
   </script>
 

et le CSS

.menu a
{

text-decoration:none;
display:block;
text-align:center;

}

.menu li
{
float:left;
list-style:none;
position:relative;
}

.menu ul
{
line-height:1.7em;
position:absolute;

} 

Modifié par 6l20 (03 Oct 2014 - 09:46)