Bonjour,
J'ai réalisé un menu déroulant avec un background linéar gradient qui marche parfaitement sur Google chrome, internet explorer et mozilla firefox. Mais sur safari le fond n'est pas affiché. J'ai donc mis un préfix "-webkit-linear-gradient" mais toujours rien.
Voila le code html :
Et le code css :
J'ai réalisé un menu déroulant avec un background linéar gradient qui marche parfaitement sur Google chrome, internet explorer et mozilla firefox. Mais sur safari le fond n'est pas affiché. J'ai donc mis un préfix "-webkit-linear-gradient" mais toujours rien.
Voila le code html :
<div class="choix_langue">
<ul id="menu_langue">
<li><a href="#"><img src="drapeau/france.png"> Français</a>
<ul>
<li><a href="#"><img src="drapeau/angleterre.png"> English</a></li>
<li><a href="#"><img src="drapeau/allemagne.png"> Deutsch</a></li>
<li><a href="#"><img src="drapeau/espagne.png"> Español</a></li>
<li><a href="#"><img src="drapeau/italie.png"> Italiano</a></li>
<li><a href="#"><img src="drapeau/arabe.png"> ???????</a></li>
<li><a href="#"><img src="drapeau/russie.png"> ???????</a></li>
<li><a href="#"><img src="drapeau/neerlandais.png"> Nederlands</a></li>
<li><a href="#"><img src="drapeau/chine.png"> ??</a></li>
</ul>
</li>
</ul>
</div>
Et le code css :
#menu_langue a {
display:block;
color: #fff;
text-decoration:none;
text-align: left;
margin-bottom: 1px;
}
#menu_langue li,
#menu_langue li li {
position: relative;
border-radius: 5px;
display:inline-block;
width: 140px;
padding: 7px 15px;
background-color: -webkit-linear-gradient(to right, rgb(228, 58, 21), rgb(230, 82, 69));
background: linear-gradient(to right, rgb(228, 58, 21), rgb(230, 82, 69));
}
#menu_langue li li:hover {
background: #FFCDD2;
box-shadow: 0 2px 5px rgba(0,0,0,.26);
}
#menu_langue ul {
position: absolute;
top: 2em; left: 0;
max-height: 0em;
margin: 0;
background: linear-gradient(to right, rgb(228, 58, 21), rgb(230, 82, 69));
overflow: hidden;
transition: 2s max-height 0.3s;
border-radius: 0 0 8px 8px;
box-shadow: 0 2px 5px rgba(0,0,0,.26);
padding: 0;
}
#menu_langue li:hover ul {
max-height: 20em;
}