Bonjour à tous,

J'essaye tant bien que mal de faire un menu déroulant horizontal et j'ai quelques problèmes.

Voici la structure html du menu :

<div id="menu">
    <div id="menu_inner">
			
        <ul>
            <li class="menu">
                <a class="item" href="#">Photoshop</a>
                <ul class="submenu">
                    <li>Webdesign</li>
                    <li>Dessin</li>
                    <li>MattPainting</li>
                    <li>Digital Painting</li>
                </ul>
            </li>
                <li class="sep menu" >|</li>
            <li class="menu">
                <a href="#">Illustrator</a>
            </li>
                <li class="sep menu" >|</li>
            <li class="menu">
                <a href="#">Flash</a>
            </li>
                <li class="sep menu" >|</li>
            <li class="menu">
                <a href="#">3D</a>
            </li>
                <li class="sep menu" >|</li>
            <li class="menu">
                <a href="#">InDesign</a>
            </li>
                <li class="sep menu" >|</li>
            <li class="menu">
                <a href="#">After Effects</a>
            </li>
                <li class="sep menu" >|</li>
            <li class="menu">
                <a href="#">Développement</a>
            </li>
        </ul>
				
    </div>
</div>

Et le css qui lui est lié :

#menu{
	width: 100%;
	background: red url("../images/menu_background.png") repeat-x;
	min-height: 36px;
}

#menu #menu_inner{
	width: 1000px;
	margin-left:auto;
	margin-right: auto;
}

#menu ul li.menu{
	float: left;
	list-style-type: none;
	color: #FFF;
	min-height: 36px;
	line-height: 36px;
}

.submenu{
	position: absolute; 
	background: url("../images/transp1.png") repeat;
	display: none; 
}

#menu ul li a{
	display: block;
	color: #FFF;
	text-decoration: none;
	font-family: Verdena;
	font-size: 14px;
	min-height: 36px;
	padding-left: 15px;
	padding-right: 15px;
}

#menu ul li a:hover{
	background: url("../images/transp1.png");
}

Mon problème est déjà que je n'arrive pas à sélectionner ma liste sub_menu avec jQuery. J'ai pourtant l'impression de le faire correctement mais ça marche pas. Et quand j'essaye en affichant tout les ul sub_menu lors du survol d'un .menu ça marche (ça les affiche tous) mais impossible de le cacher par la suite. Bref je comprend rien de ce que je fais >.<

Voici le code js que j'utilise pour sélectionner mon élément:

$(document).ready(function(){
		
	$(".menu").hover(function(){
		$(this + " > ul").fadeIn();
	});
	
});

Pour moi se code veut dire quand un élément portant la class menu est survolé affiche l'élément ul contenu dans .menu avec une animation de type fadeIn. Mais ça marche pas.

Amicalement.

Tu t'y prends mal. Voici mon exemple sans l'utilisation du CSS :

$(document).ready(function(){
	$('.submenu').hide();
	
	$('.menu').hover(function(){
		$(this).children('ul').fadeIn();
	},function() {
		$(this).children('ul').fadeOut();
	});
});

D'accords mais je me retrouve bloqué du coup pour la fermeture du menu, la classe .submenu étant en absolute si je fais

$('.menu').mouseout(function(){
$(this).children('.submenu').fadeOut();
});

Mon menu se cache quand je veux cliquer sur un lien du sous menu

Regarde mon édit.

Tu peux m'expliquer un peu, car je comprend pas ce que viens faire la virgule aprés la fonction.

Dernier truc, quand je survole un li.menu il y a un background, et il disparait quand je descend dans la menu qui se déroule. Tu sais comment faire pour qu'il reste affiché ?

Ben la virgule c'est en fait pour l'événement inverse d'hover.
Ca te permet de ne pas réécrire un autre gestionnaire d'événement pour .mouseout() ou alors faire :

$(document).ready(function(){
	$('.submenu').hide();
	
	$('.menu').hover(function(){
		$(this).children('ul').fadeIn();
	}).mouseout(function() {
		$(this).children('ul').fadeOut();
	});
});

Ce code revient au même que celui plus haut.

Pour le reste il me faudrait un exemple online car là j'ai du mal à visualiser.