Discussion :

[kenshuri]

Bonjour,
j'ai fait un menu et lorsque je passe sur un lien il affiche un sous menu horizontale.

Mon problème est que le sous menu apparaitre en dessous strictement a gauche
alors que j'aimerai qu'il apparaisse en dessous du lien sélectionner voici mon code:

html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="banniere">
    <ul id="menu" >
	<li ><a href="index.php">Accueil</a></li>
	 <!-- lien ou il y a le submenu -->   
        <li ><a href="index.php?file=compagnie">La Compagnie</a>
		<ul>
		   <li><a href="#">Présentation</a></li>
		   <li><a href="#">Equipe</a></li>
		   <li style="border:none;"><a href="#">Programmation</a></li>
		</ul>
	 </li>
    </ul>	
</div>

et mon CSS:

Code :

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
19
20
21
22
23
24
25
26
27
28
29
 
#banniere {color:red;background-image: url('images/banniere.png');
border-top: 2px solid black;border-right: 2px solid black;
border-left:2px solid black; width: 980px;height: 251px;}
 
#menu  {  margin-top: 0; top: 228px; position: absolute;}
#menu li {display:inline; text-decoration:none;  color: white; padding:0 10px;
border-right: 1px red solid;}
 
#menu li a:link { color: white; text-decoration: none; }
#menu li a:visited {color: white; text-decoration: none}
#menu li a:hover { color: pink; text-decoration: underline overline; }
 
#menu li ul{
display:none;
float:none;
 
 }
 
#menu  li:hover ul {
 display:block;
 position:absolute;
 background-color: black;
 float: none;
 margin:auto;
 padding:5px;
 
 
 }

Quelqu'un serait il m'aider? merci bcp

[devyan]

Bonjour,

Quelque chose comme ça devrait faire l'affaire ...

Code :

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

1
2
3
4
5
6
#menu li ul {
display:none;
float:none;
left:100px; /* décaler le UL vers la droite */
width:280px; /* agrandir le UL pour garder les LI sur une ligne */
}

devyan

[bastian06n]

Hum pas terrible le position absolut,
j'ai trouvé la solution, dans un élément parent mettre la propriété CSS clear: both; et dans les 2 éléments enfant un float: left; et c'est partit