Bonjour je cherche à faire un menu comme sur le site [url=http://www.guerlain.com/int/fr/base.html#/fr/home-fr/]Guerlain[/url] mais en utilisant du jquery.


J'ai essayé de faire quelque chose du type :

[code]<script type="text/javascript">

$(document).ready(function() {

$('.1').each(function(){
$(this).parent().hover(
function(){
$(this).children('.1').slideLeftShow();
},
function(){
$(this).children('.1').slideLeftHide();
});
});


$('.2').each(function(){
$(this).parent().hover(
function(){
$(this).children('.2').slideLeftShow();
},
function(){
$(this).children('.2').slideLeftHide();
});
});

$('.3').each(function(){
$(this).parent().hover(
function(){
$(this).children('.3').slideLeftShow();
},
function(){
$(this).children('.3').slideLeftHide();
});
});

$('.4').each(function(){
$(this).parent().hover(
function(){
$(this).children('.4').slideLeftShow();
},
function(){
$(this).children('.4').slideLeftHide();
});
});


});

</script>


<div class="d" style="width:100px;position:absolute;">
<div style="width:150px;float:left;position:absolute;"><a href="page.html" >Slide</a></div>

<div id="div1" class="1" style="width:300px;height:350px;display:none;float:left;position:absolute;left:150px">
<a href="page.html" >Slide2</a><br />
<div id="div2" class="2" style="width:150px;height:350px;background:#CCCCCC;display:none;float:left;position:absolute;left:150px;top:-20px;">echo "Ici je met mon text2</div>
</div>

<div id="div1" class="3" style="width:300px;height:350px;display:none;float:left;position:absolute;left:150px;top:20px;">
<a href="page.html" >Slide3</a><br />
<div id="div2" class="4" style="width:150px;height:350px;background:#CCCCCC;display:none;float:left;position:absolute;left:150px;top:-20px;">Ici je met mon text3</div>
</div>


</div>


[/code]


Mais je n'arrive pas à avoir les 3 colonnes bien aligné comme sur le site de guerlain dès que je rajoute d'autre rubrique ca ne fonctionne plus mes menus se superpose.

Avez vous une solution pour le faire.


Merci pour vos réponses