Background ul ul

**idate** · 23/08/2013, 20h01

Bonjour,

Je suis en pleine création d'un menu pour mon site. Cependant, j'ai du mal à mettre un background sur un ul dans un autre ul.

Voici le rendu actuel:

http://aumtuto.verygames.net/menu.php

Je souhaiterais que toute ma liste de lien ait un fond avec une opacity réduite. Actuellement, seule les li ont un background.

Voici mon code:

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head></head>
<style>
  #menu{
	/*background-image: url(images/design/menunew.jpg);*/
	width: 1000px;
	padding-top: 172px;
	height: 127px;
	margin-left: 140px;
}
 
 #menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 height: 70px;
 }
#menu ul li {
 float:left;
 margin:auto;
 padding:0;
 
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:4px;
 }
#menu li a:hover {
 color:#FFD700;
 }
 
 #menu ul li ul {
 display:none;
 }
 
 
 #menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 
 }
#menu li ul {
position:absolute;
 
}
 
#menu ul li a {
 display:block;
 float:left;   
 width:93px;
 height:50px; /*hauteur de l'image de fond*/
 color:black;
 text-decoration:none;
 text-align:center;
 padding-top: 20px;
 }
 
 #menu ul li a img {
 	padding-top: 8px;
 }
 
#menu ul li a:hover {
 background:url(http://aumtuto.verygames.net/images/design/fond2.png) center no-repeat;
 text-align: center;
 background-color: blue;
}
 
</style>
<body>
<div id="menu">
<ul>
  <li><a href="index.php?nav=Accueil" title="Accueil Serveur AumTuto"><img src="images/design/nAccueil.png" alt="" ></a>
      <ul>
      <li class="cat"><a href="index.php?nav=Accueil" title="Accueil Serveur AumTuto"><img src="images/design/nAccueil.png" alt="" ></a></li>
      <li><a href="index.php?nav=AumTuto" title="AumTuto Production"><img src="images/design/aumtuto.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=Jouer" title="Jouer sur le serveur AumTuto"><img src="images/design/njouer.png" alt="" ></a>
    <ul>
      <li><a href="index.php?nav=Jouer" title="Jouer sur le serveur AumTuto"><img src="images/design/njouer.png" alt="" ></a></li>
      <li><a href="index.php?nav=Les Tutos" title="Les Tutos AumTuto"><img src="images/design/lestutos.png" alt="" ></a></li>
      </ul>
  </li>
  <li><a href="index.php?nav=Serveur" title="Presentation du serveur"><img src="images/design/nserveur.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=Serveur" title="Presentation du serveur"><img src="images/design/nserveur.png" alt="" ></a></li>
      <li><a href="index.php?nav=Les Mondes" title="Les mondes du serveur"><img src="images/design/lesmondes.png" alt="" ></a></li>
      <li><a href="index.php?nav=Photos" title="La Galerie photo du serveur"><img src="images/design/ngalerie.png" alt="" ></a></li>
      <li><a href="index.php?nav=Les inscrits" title="Les joueurs du serveur"><img src="images/design/ninscrits.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=Boutique" title="Boutique AumTuto"><img src="images/design/boutique.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=Boutique" title="Boutique AumTuto"><img src="images/design/boutique.png" alt="" ></a></li>
      <li><a href="index.php?nav=Devenez VIP" title="Devenez VIP sur le serveur"><img src="images/design/devenezvip.png" alt="" ></a></li>
      <li><a href="index.php?nav=recharger" title="Recharger votre porte-monnaie en Aums"><img src="images/design/lesaums.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=La Team" title="Les membres de l'equipe AumTuto"><img src="images/design/nteam.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=La Team" title="Les membres de l'equipe AumTuto"><img src="images/design/nteam.png" alt="" ></a></li>
      <li><a href="index.php?nav=Recrutement" title="Rejoignez-nous !"><img src="images/design/recrutement.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=FAQ" title="Une question? Direction la FAQ !"><img src="images/design/nfaq.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=FAQ" title="Une question? Direction la FAQ !"><img src="images/design/nfaq.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=Contact" title="Contactez-nous"><img src="images/design/ncontact.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=Contact" title="Contactez-nous"><img src="images/design/ncontact.png" alt="" ></a></li>
    </ul>
  </li>
</ul>
</div>
 
</body>
</html>

Pouvez-vous m'aider à mettre ce background correctement?

Merci d'avance.

idate

Invité · 23/08/2013, 20h06

Bonjour,

Envoyé par idate

...Je souhaiterais que toute ma liste de lien ait un fond avec une opacity réduite....

C'est à dire... ?

**idate** · 23/08/2013, 20h14

En gros, tu vois le bleu en hover des lien actuellement? Et bien j'aimerais qu'il y ait du bleu en background de tous les li d'un même ul lors du hover sur un ul.

Me suis je fais mieux comprendre?

Invité · 23/08/2013, 20h28

Code :

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

1
2
3
4
#menu ul li:hover ul {
 background:url(http://aumtuto.verygames.net/images/design/fond2.png) center no-repeat;
 background-color: blue;
}

?

**idate** · 23/08/2013, 20h57

Je te laisse voir le résultat sur le premier lien, ce n'est pas ce que je souhaite. La, seul le premier li a le background bleu

Invité · 23/08/2013, 20h58

Explique MIEUX ce que tu veux, ok ?
+ code.

**idate** · 23/08/2013, 21h20

Rien ne vaut un dessin.

http://hpics.li/7fd7d44

On voit bien ce que j'ai dis précédemment à savoir: tous les li d'un ul ont le meme background. l'image illustre les différents sous menu apparaissant au passage de la souris sur le ul donné.

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
<head></head>
<style>
  #menu{
	/*background-image: url(images/design/menunew.jpg);*/
	width: 1000px;
	padding-top: 172px;
	height: 127px;
	margin-left: 140px;
}
 
 #menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 height: 70px;
 }
#menu ul li {
 float:left;
 margin:auto;
 padding:0;
 
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:4px;
 }
#menu li a:hover {
 color:#FFD700;
 }
 
 #menu ul li ul {
 display:none;
 }
 
 
 #menu ul li:hover ul {
 display:block;
 background-color: blue;
 }
#menu li:hover ul li {
 float:none;
 
 }
#menu li ul {
position:absolute;
 
}
 
#menu ul li a {
 display:block;
 float:left;   
 width:93px;
 height:50px; /*hauteur de l'image de fond*/
 color:black;
 text-decoration:none;
 text-align:center;
 padding-top: 20px;
 }
 
 #menu ul li a img {
 	padding-top: 8px;
 }
 
#menu ul li a:hover {
 background:url(http://aumtuto.verygames.net/images/design/fond2.png) center no-repeat;
 text-align: center;
 
}
 
</style>
<body>
<div id="menu">
<ul>
  <li><a href="index.php?nav=Accueil" title="Accueil Serveur AumTuto"><img src="images/design/nAccueil.png" alt="" ></a>
      <ul>
      <li class="cat"><a href="index.php?nav=Accueil" title="Accueil Serveur AumTuto"><img src="images/design/nAccueil.png" alt="" ></a></li>
      <li><a href="index.php?nav=AumTuto" title="AumTuto Production"><img src="images/design/aumtuto.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=Jouer" title="Jouer sur le serveur AumTuto"><img src="images/design/njouer.png" alt="" ></a>
    <ul>
      <li><a href="index.php?nav=Jouer" title="Jouer sur le serveur AumTuto"><img src="images/design/njouer.png" alt="" ></a></li>
      <li><a href="index.php?nav=Les Tutos" title="Les Tutos AumTuto"><img src="images/design/lestutos.png" alt="" ></a></li>
      </ul>
  </li>
  <li><a href="index.php?nav=Serveur" title="Presentation du serveur"><img src="images/design/nserveur.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=Serveur" title="Presentation du serveur"><img src="images/design/nserveur.png" alt="" ></a></li>
      <li><a href="index.php?nav=Les Mondes" title="Les mondes du serveur"><img src="images/design/lesmondes.png" alt="" ></a></li>
      <li><a href="index.php?nav=Photos" title="La Galerie photo du serveur"><img src="images/design/ngalerie.png" alt="" ></a></li>
      <li><a href="index.php?nav=Les inscrits" title="Les joueurs du serveur"><img src="images/design/ninscrits.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=Boutique" title="Boutique AumTuto"><img src="images/design/boutique.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=Boutique" title="Boutique AumTuto"><img src="images/design/boutique.png" alt="" ></a></li>
      <li><a href="index.php?nav=Devenez VIP" title="Devenez VIP sur le serveur"><img src="images/design/devenezvip.png" alt="" ></a></li>
      <li><a href="index.php?nav=recharger" title="Recharger votre porte-monnaie en Aums"><img src="images/design/lesaums.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=La Team" title="Les membres de l'equipe AumTuto"><img src="images/design/nteam.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=La Team" title="Les membres de l'equipe AumTuto"><img src="images/design/nteam.png" alt="" ></a></li>
      <li><a href="index.php?nav=Recrutement" title="Rejoignez-nous !"><img src="images/design/recrutement.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=FAQ" title="Une question? Direction la FAQ !"><img src="images/design/nfaq.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=FAQ" title="Une question? Direction la FAQ !"><img src="images/design/nfaq.png" alt="" ></a></li>
    </ul>
  </li>
  <li><a href="index.php?nav=Contact" title="Contactez-nous"><img src="images/design/ncontact.png" alt="" ></a>
      <ul>
      <li><a href="index.php?nav=Contact" title="Contactez-nous"><img src="images/design/ncontact.png" alt="" ></a></li>
    </ul>
  </li>
</ul>
</div>
 
</body>
</html>

Background ul ul

CSS

Discussions similaires

Partager

Partager