Problème sous-menu

Bonjour,

J'ai un problème avec mon code actuellement, en ce qui concerne le sous-menu de ma barre de navigation déroulante. Je vous donne mon code HTML & CSS, afin de vous expliquer plus en profondeur.

<ul id="menu">
	<li><a href="link1.html"><img src="images/barre-nav_03.png"></a>
		<ul>
			<li><a href="#">Level 1.1</a></li>
			<li><a href="#">Level 1.2</a></li>
		</ul>
	</li><li><a href="link2.html"><img src="images/barre-nav_05.png"></a>
		<ul>
			<li><a href="#">Level 2.1</a></li>
			<li><a href="#">Level 2.2</a></li>
			<li><a href="#">Level 2.3</a></li>
			<li><a href="#">Level 2.4</a></li>
		</ul>
	</li><li><a href="link2.html"><img src="images/barre-nav_07.png"></a>
		<ul>
			<li><a href="#">Level 3.1</a></li>
			<li><a href="#">Level 3.2</a></li>
			<li><a href="#">Level 3.3</a></li>
		</ul>
	</li><li><a href="link2.html"><img src="images/barre-nav_09.png"></a>
	<ul>
			<li><a href="#">Level 3.1</a></li>
			<li><a href="#">Level 3.2</a></li>
			<li><a href="#">Level 3.3</a></li>
		</ul>
	</li><li><a href="link2.html"><img src="images/barre-nav_11.png"></a>
		<ul>
			<li><a href="#">Level 3.1</a></li>
			<li><a href="#">Level 3.2</a></li>
			<li><a href="#">Level 3.3</a></li>
		</ul>
	</li><li><a href="link2.html"><img src="images/barre-nav_13.jpg"></a>
		<ul>
			<li><a href="#">Level 3.1</a></li>
			<li><a href="#">Level 3.2</a></li>
			<li><a href="#">Level 3.3</a></li>
		</ul>
</ul>

#menu a { 
	display:block; 
	color: black; 
	text-decoration:none;
}

#menu > li,
#menu > li li {
	position: relative;
	display:inline-block;
}
#menu > li li { 
	background: transparent none; 
}

#menu > li li a img{
	width:400px;
	height:200px;
}

/* fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
	position: absolute;
	top: 2em; left: 0;
	max-height:0em;	
	overflow: hidden;
	transition: 1s max-height 0.3s;
}

/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
	max-height: 400px;
}

Actuellement, le menu fonctionne correctement. Cependant, j'aimerais le personnaliser et arriver à un résultat tel celui-ci :
Comment dois-je m'y prendre ? Je parle bien sûr de la largeur du sous-menu, et du fait que les titres soient placés ainsi, par colonnes, une fois que l'on survole avec la souris un bouton de la barre de navigation.

Je vous remercie d'avance !
Modifié par Allydia (31 Oct 2016 - 10:27)

Bonjour,

Je vais essayer de t'aider.

Avec ton code actuel, tu n'arriveras pas à un menu de celui sur la photo. Si j'ai bien compris, à chaque 'catégorie' (la marque, make-up, soin, etc), il doit s'afficher un sous-menu qui contient des sous-catégories. Il te faudra donc changer ton html. Le but est de placer les sous-catégories dans une div et d'afficher cette div au survol de la souris.

Je te propose un premier exemple ici: https://jsfiddle.net/g3cpw9bv/

J'ai utilisé inline-block sur les ul (qui sont en block par défaut) et préciser la largeur sur la div parent.

Regarder bien le code html pour bien comprendre le css.

Et un second exemple ici: https://jsfiddle.net/bgmhgdag/

J'utilise la propriété css 'columns' sur la div parent qui simplifie le code mais cette propriété ne fonctionne pas sur les anciennes versions d'internet explorer, donc à prendre en considération si la compatibilité navigateurs est un facteur important.

http://caniuse.com/#search=column

J'ai aussi ajouter du padding au LI pour qu'il touche la div parent et j'ai fait descendre la div parent (top: 10px) pour qu'elle touche le padding du LI pour qu'elle reste affichée au survol. La div est placée en absolue par rapport au LI parent qui est en position relative.

Je fais que proposer mes codes. Je pense que quelqu'un (de plus expérimenté) trouvera un meilleure solution. a +

http://www.w3schools.com/css/css3_multiple_columns.asp