Problème avec le menu deroulant: Background-color

Résolu/Fermé
davide21 Messages postés 32 Date d'inscription dimanche 7 avril 2013 Statut Membre Dernière intervention 16 mai 2014 - 10 mai 2014 à 23:14
davide21 Messages postés 32 Date d'inscription dimanche 7 avril 2013 Statut Membre Dernière intervention 16 mai 2014 - 11 mai 2014 à 02:56
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,

A voir également:

2 réponses

cocodu67... Messages postés 3153 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 4 avril 2024 145
10 mai 2014 à 23:25
Lu'

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

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