Discussion :

[Kraster]

Bonjour,

Je cherche comment faire pour créer un menu semblable à celui-ci (voir image).
Le menu contient des sous menus sous forme de tableaux qui sortent et se cachent avec un effet de transition lors de son survol.
Pour mieux comprendre l'effect visitez ce lien: http://www.videdressing.com.

voici le code que j'ai écris:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- HTML -->
<nav class="nav">
	<ul>
		<li class="point"><a href="#"><strong>ALPHA</strong></a></li>
		<li class="point"><a href="#">BRAVO</a></li>
		<li class="point"><a href="#">DELTA</a></li>
		<li class="point"><a href="#">ECHO</a></li>
		<li class="point"><a href="#">FOXTROT</a></li>
		<li class="point"><a href="#">GOLF</a></li>
		<li class="point"><a href="#">HOTEL</a></li>
		<li class="point"><a href="#">JULIETTE</a></li>
	</ul>
</nav>

Code css :

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
17
18
/* fichier CSS */
nav ul li {
    display: inline;
	padding:10px 5px 10px 10px;
}
nav ul li.point{
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAAA1BMVEUAAACnej3aAAAACklEQVQI12MAAgAABAABINItbwAAAABJRU5ErkJggg==") left center no-repeat;
}
 
nav {height:38px;background-color:white;overflow:hidden;border-bottom: 1px #cccccc solid;line-height:38px;}
nav ul {text-align:center;width:100%;}
nav ul li a {width:auto;padding:10px 10px 10px 10px; font-size:14px;}
 
nav a:link { color:#333333; }
nav a:visited { color:#333333; }
nav a:active { color:#333333; }
nav a:hover { color:#333333;background-color:#333333;color:white;}
nav a:focus { color:#333333; }

et puisque je suis débutant je n'arrive pas à faire le reste.
Je vous remercie par avance )