Discussion :

[marcandre]

Bonjour à tous ,

Je possède un menu horizontal avec un déroulement des sous menus lorsque je passe la souris .

Seulement voilà, je voudrais savoir comment peut-on aligner les panneaux des sous menu à droite, de façon à ce que tous les panneaux affichés soient positionnés de la façon suivante :

Tous les panneaux représentant les sous menus doivent avoir même la distance entre la flèche (représentée par la lettre V) et la bordure de droite du panneau .

Voici le code HTML du menu :

Code html :

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
<div id='menu'>
  <ul>
    <li><a href='/'>Item 1&nbsp;&gt;&nbsp;</a></li>
    <li><a  href='#'>Item 2&nbsp;
      <div class='drop' >v</div>
      &nbsp;</a>
      <ul>
        <li>
          <div class='panneau_sous_menu' ><a class='article_panneau_sous_menu' href='#'>Item 4</a>
          <a class='article_panneau_sous_menu'  href='#'>Item 5</a>
          <a class='article_panneau_sous_menu' href='#'>Item 6</a></div>
        </li>
      </ul>
    </li>
    <li><a href='#'>&nbsp;&gt;&nbsp;Item 3 avec un long texte&nbsp;
      <div class='drop' >v</div>
      &nbsp;</a>
      <ul>
        <li>
          <div class='panneau_sous_menu' ><a class='article_panneau_sous_menu' href='#'>Item 7</a>
          <a class='article_panneau_sous_menu' href='#'>Item 8</a>
          <a class='article_panneau_sous_menu' href='#'>Item 9</a>
          <a class='article_panneau_sous_menu' href='#'>Item 10</a></div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Le code CSS du menu :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
#menu {
	width: 960px;
	padding-bottom:12px;
	margin-left: auto;
	margin-right: auto;
}
#menu ul {
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	font-size:10px;
}
#menu li {
	float:left;
	margin:auto;
	padding:0;
	background-color:#FFFFFF;
	color:#323232;
}
#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	color:#323232;
	text-decoration:none;
}
#menu ul li ul {
	display:none;
}
#menu ul li:hover ul {
	display:block;
}
#menu li:hover ul li {
	float:none;
}
#menu ul li:hover .drop {
	padding:0px 2px 10px 2px;
}
#menu li ul {
	position:absolute;
}
.panneau_sous_menu {
	text-align:left;
	position:relative;
	background-color:#FFFFFF;
	border:2px #323232 solid;
	padding:10px 15px 10px 15px;
	margin-top:2px;
	border-radius:5px 5px 5px 5px;
    z-index:50;
}
.article_panneau_sous_menu {
	color:#323232;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	text-decoration: none;
}
#menu ul li ul li div .article_panneau_sous_menu:hover {
	color:#323232;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	text-decoration:underline;
}
.drop {
	border-radius:2px 2px 2px 2px;
	padding:0px 2px 0px 2px;
	display:inline;
	overflow:hidden;
	background-color:#323232;
	position:relative;
	color:#FFFFFF;
}

Je reste à votre disposition pour tout autre renseignement .

Cordialement .

[NoSmoking]

Bonjour,
je te propose dans un premier temps de reprendre la structure de ton menu sous forme de VRAIE liste <UL><LI>

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id='menu'>
  <ul>
    <li><a href='/'>Item 1&nbsp;&gt;&nbsp;</a></li>
    <li><a  href='#'>Item 2&nbsp;
      <div class='drop' >v</div>
      &nbsp;</a>
      <ul>
          <li><a class='article_panneau_sous_menu' href='#'>Item 4</a></li>
          <li><a class='article_panneau_sous_menu' href='#'>Item 5</a></li>
          <li><a class='article_panneau_sous_menu' href='#'>Item 6</a></li>
      </ul>
    </li>
<!-- la suite -->