Bonjour à tous,

Voila mon soucis sur lequel je me prend la tête depuis des heures (en même temps je suis débutant dans le domaine et jongler avec html, css et script... )

Dans mon code html j'ai un menu accordéon animé :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="content">
	<ul class="menu">
		<li class="item1"><a href="#">Menu 1 <span>3</span></a>
			<ul>
				<li class="subitem1"><a href="#">Sous Menu 1<span>1</span></a></li>
				<li class="subitem2"><a href="#">Sous Menu 2<span>2</span></a></li>
			</ul>
		</li>
		<li class="item2"><a href="#">Sous Menu 1<span>3</span></a>
			<ul>
				<li class="subitem1"><a href="#">Circuit 1<span>1</span></a></li>			
			</ul>
		</li>				
	</ul>
<div id="bouton-menu"><img src="images/Superieure.png"></div>
</div>

Je voudrais positionner l'image "Superieure.png" à droite de mon menu accordéon (à l'heure actuelle en dessous avec ce code). Voici pour le moment la partie css (mais image toujours en dessous avec cela) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
#bouton-menu {
	float:right;
	width:70px;
	margin:0px;	
}
#content {	
	width: 200px;
	font-size: 0.8125em;
	position:fixed;
	left:20px;
	overflow:hidden;
}
Une fois le positionnement effectué, j'aimerais faire apparaitre le menu par survol de la souris sur l'image "superieure.png", pour cela je comptais modifier la ligne dans le code css ci-dessus "left:20px;" par "left:-200px;"

Puis ajouter une animation du style :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
$(document).ready(function() {
  $("#content").hover(function() {
    $("#content").animate({ marginLeft: "200px"  }, 400 );
  },function(){
    $("#content").animate({ marginLeft: "0"  }, 300 );
  });
});

je sens que je ne suis pas loin mais je coince.

Une âme charitable pour m'aider ?