Problème avec le menu deroulant: Background-color

[Résolu/Fermé]
Signaler
Messages postés
32
Date d'inscription
dimanche 7 avril 2013
Statut
Membre
Dernière intervention
16 mai 2014
-
Messages postés
32
Date d'inscription
dimanche 7 avril 2013
Statut
Membre
Dernière intervention
16 mai 2014
-
Bonjour,

Je viens vers vous parce que j'ai un problème: En faite, j'aimerai mettre un background-color sur mon menu, (sur le hover) mais lorsque je le fait je vois uniquement la couleur de fond sur le texte or ce n'est pas ce que je veux.
C'est difficile d'expliquer ce que veux donc, je met le lien pour que vous voyez le résultat. (le couleur de fond quand on survole n'apparaît que sur le texte, mais je ne veux pas uniquement sur le texte) - (J'ai un menu déroulant mais le problème n'est pas le sous-menu)
http://www.cine-seriestv.tk
Voici mon code html:
<nav>
<ul id="menu">
    <li><a href="index.html">Accueil</a></li>
    <li> <a href="cinema.html">Cinéma</a>
        <ul>
            <li><a href="news-cinema.html">Actualités</a></li>
			<li><a href="box-office.html">Box-Office</a></li>
            <li><a href="videos-cinema.html">Vidéos</a></li>
        </ul>
    </li>
    <li><a href="tv.html">TV</a>
	    <ul>
		    <li><a href="#">Séries</a>
			    <ul>
				    <li><a href="news-series.html">Actualités</a></li>
					<li><a href="videos-series.html">Vidéos</a></li>
				</ul>
			</li>
	        <li><a href="audiences-tv.html">Audiences</a></li>
			<li><a href="festivals.html">Festivals</a></li>
	    </ul>
	</li>
        <li><a href="programmes.html">Programmes </a></li>
        <li><a href="contact.html">Contact</a></li>
</ul>
</nav>


et mon code CSS:
/* Element menu principal */
#menu{
    width: 970px;
    margin: 0px;
	margin-top: 10px;
	margin-left: -10px;
	padding: 10px 0 0 0;
    list-style: none;
	background: #111;
	background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 15px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

#menu li a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a { 
display: block; 
float: none; 
height: auto; 
line-height: 1; 
padding: 10px 30px; 
text-transform: none; 
white-space: nowrap; 
font-size: 13px;
} 

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}
#menu li ul li:hover ul li a:before , #menu li ul li:hover ul li a:after { 
visibility: hidden; 
} 
#menu li ul li:hover ul { 
height: auto; 
margin: -35px 0 0 120px; 
position: absolute; 
padding: 0; 
} 


J'espère que vous comprenez ce que je veux.

Merci d'avance pour votre aide,

2 réponses

Messages postés
3110
Date d'inscription
jeudi 28 janvier 2010
Statut
Membre
Dernière intervention
24 mai 2021
140
Lu'

Chez moi tout le rectangle devient bleu (sauf le texte) quand je passe la souris dessus.
Messages postés
32
Date d'inscription
dimanche 7 avril 2013
Statut
Membre
Dernière intervention
16 mai 2014

salut,

Tu peux revérifier à nouveau? Je faisais des tests peut-être que tu t'es connecté à ce moment là...