Relative position and Jquery animate

[guighivalge]

So here's the problem :I'm creating a slider menu and everything was working fine until i try to center it with margin: 0 auto;I strongly think the problem comes from relative positioning and the Jquery .animate function i am using. So i am looking for another way to achieve the same result !Here's a fiddle WITH the problemhttp://jsfiddle.net/jwsh7/ (image couldnt be include so i put a border on everything , the problem is with the green bordered div)P.S.Remove margin: 0 auto; to see it work as i want it tooCSS :\[code\]body {margin: 0;padding:0;}#content { width: 625px;border: 1px solid red;}#content div.slider { position:relative;width: 50px;height: 100px;background-image:url(images/rond.png);background-repeat:no-repeat;background-position:center;background-size:cover;z-index: 2; top: 110px;left: 25px;border: 1px solid red;}.menu{color:#00C;font-size:18px;font-family:"OnomatoShark!";position:absolute; width:50px; height:100px; background-image:url(images/ligne_barre.png);background-position:center;background-repeat:no-repeat;cursorointer;border: 1px solid red;}.menu p{width: 150px;float: left;position:absolute;top: -25px;left: 10px;}.menu p:hover{width: 150px;float: left;position:absolute;top: -25px;color:red;}#barre {position:relative; width:600px; height:28px; background-image:url(images/ligne.png);background-position:center;list-style-type:none; top: 25px;padding:0;border: 1px solid red;}#sousMenu1 {margin: 0;padding: 0;margin-top: 90px;background-image:url(images/sousmenu.png);background-position:left;background-repeat:no-repeat;overflow:hidden;float:left;height:150px;display:none;text-align:left;}#sousMenu2 {margin: 0;padding: 0;margin-top:90px;margin-left: 10px;background-image:url(images/sousmenu.png);background-position:left;background-repeat:no-repeat;overflow:hidden;float:left;height:150px;display:none;}#sousMenu3 {margin: 0;padding: 0;margin-top: 90px;margin-left: 10px;background-image:url(images/sousmenu.png);background-position:left;background-repeat:no-repeat;height:150px;width: 250px;overflow:hidden;float:left;display:none;}#sousMenu4 {margin: 0;padding: 0;margin-top: 90px;margin-left: 10px;background-image:url(images/sousmenu.png);background-position:left;background-repeat:no-repeat;height:150px;overflow:hidden;float:left;display:none;}ol {text-align:left;padding-top: 20px;}ol a{text-decoration:none;}\[/code\]HTML : \[code\] <div class='slider'></div> <ul id="barre"> <li class="menu" id="option1"><p>Accueil</p></li> <li class="menu" id="option2"> <p>Animation</p> <ul class="sous-menu" id="sousMenu1"> <ol><a href="http://stackoverflow.com/questions/15508581/#">Histoire</a></ol> <ol><a href="http://google.com">Avanc