Discussion :

[bruman]

Bonjour,

j'ai fais un menu classique qui se déroule lorsqu'on passe la souris dessus (tout comme le menu bleu en haut de développez.net "tab.debord","Regles"... mais en mouseover).

Mon problème est que je voudrais que les entêtes n'est pas de fond mais que les liens qui apparaissent ai une image de fond.

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
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
 
<div id="menu_principal">
	<ul id="menu">
		<li class="racine">
			<a href="#">PHILOSOPHIE<br/>Démarche scientifique</a>
			<ul class="sousMenu">
				<li><a href="#">castor</a></li>
				<li><a href="#">aligator</a></li>
				<li><a href="#">musclor</a></li>
			</ul>
		</li>
		<li class="racine">
			<a href="#">PRESENTATION<br/>Les équipes</a>
			<ul class="sousMenu">
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
			</ul>
		</li>
		<li class="racine">
			<a href="#">LES MISSIONS<br/>de restauration</a>
			<ul class="sousMenu">
				<li><a href="#">pommes</a></li>
				<li><a href="#">poires</a></li>
				<li><a href="#">ananas</a></li>
				<li><a href="#">pamplemousse</a></li>
				<li><a href="#">banane</a></li>
				<li><a href="#">raisins</a></li>
				<li><a href="#">framboises</a></li>
				<li><a href="#">fraises</a></li>
				<li><a href="#">mirabelles</a></li>
				<li><a href="#">groseilles</a></li>
		</ul>
		</li>
		<li class="racine">
			<a href="#">LES PARTENAIRES</a>
			<ul class="sousMenu">
				<li><a href="#">tomates</a></li>
				<li><a href="#">haricots</a></li>
				<li><a href="#">carrottes</a></li>
				<li><a href="#">choux</a></li>
				<li><a href="#">concombres</a></li>
				<li><a href="#">courgettes</a></li>
				<li><a href="#">endives</a></li>
				<li><a href="#">navets</a></li>
				<li><a href="#">epinards</a></li>
				<li><a href="#">avocat</a></li>
			</ul>
		</li>
		<li class="racine">
			<a href="#">PUBLICATION<br/>Scientifiques</a>
			<ul class="sousMenu">
				<li><a href="#">tomates</a></li>
				<li><a href="#">haricots</a></li>
				<li><a href="#">carrottes</a></li>
			        <li><a href="#">choux</a></li>
				<li><a href="#">concombres</a></li>
				<li><a href="#">courgettes</a></li>
				<li><a href="#">endives</a></li>
				<li><a href="#">navets</a></li>
				<li><a href="#">epinards</a></li>
				<li><a href="#">avocat</a></li>
			</ul>
		</li>
	</ul>
 
	<script type="text/javascript">
		initMenu();
	</script>
 
</div>

et mon code 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
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
/* CSS du menu horizontal, bieler batiste */
 
.menu{
    position:absolute;
    display:block;
    margin-left:60px;
    margin-top:0;
    padding:0;
    width:620px;
    }
 
.menu ul{
    position:absolute;
    display:block;
    width:124px;
    /*margin:0;*/
    padding:0;
    }
 
.menu li ul{
    visibility:hidden;
    }
 
.menu li li ul{
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
    }
 
.menu li{
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
 
.menu li li{
    display:block;
    float:none;
    }
 
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
 
.menu a{
    text-align:center;
    color:#fff;
    display:block;
    width:120px;
    text-decoration:none;
    padding:2px 0;
    margin:1px;
    }
 
.menu a:hover{
    background-color: #48740f;
}
 
/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #48740f;
}
 
a.linkOver{
    background-color: #48740f;
    }

Je vois bien que mes entêtes sont aussi des liens (<a>), j'ai essayé de donner un nom de classe (genre "feuille") aux entêtes et pas aux autres, mais je n'arrive pas à le faire fonctionner.

Ci quelqu'un a une idée?

Merci

[Carabi]

Bonsoir,

Une question : que fait ta fonction "initMenu()" en bas de ton code html?
Pour tester, c'est hard...

[desert]

C'est normal qu'il ne marche pas car tu t'es trompé entre class et id (tu as mis un . au lieu d'un # pour ta balise ul menu).
Tu n'es pas non plus obligé de spécifier la propriété display:block aux balises ul et li puisqu'elles la possèdent déjà par défaut.

[Carabi]

Tu peux aussi changer la ligne

Code :

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

<ul id="menu">

au début du fichier HTML en

Code :

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

<ul class="menu">

Cependant, je ne pense pas que ça soit la solution au problème d'origine.

[bruman]

En fait, j'ai du mal m'exprimer :

Le menu est généré par un javascript (d'où la méthode initMenu()).
Mon menu fonctionne parfaitement bien.

Ce que je veux faire, c'est modifier le CSS pour avoir des entêtes avec un fond transparent et mes sous menu avec un fond gris.

Pour l'instant, les entêtes et les sous-menus ont la même apparence. Je veux donc créer deux apparences différentes : une pour les entêtes, et une pour les sous-menus (que j'appelle feuille car il n'y a qu'un seul niveau de sous-menus).

Mon problème est que je n'arrive pas à définir une deuxième classe CSS pour les feuilles car cela ne fonctionne jamais.

Merci

[Carabi]

Tu peux te servir de la propriété "first-child" de CSS. Elle sélectionne le premier fils de l'élément que tu traite.
Par exemple :

Code :

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

1
2
3
4
 
table tr:first-child{
	background-color: blue;
}

rendra bleu le fond de la première et uniquement la première ligne (balise tr) de la table.