[résolu]Menu déroulant dans un sprite

------- RESOLU -------

Bonjour,

Je rencontre un problème avec l'onglet de mon menu crée à partir d'un sprite, qui lorsque je me rend dans le menu déroulant redevient inactif (résultat de gauche), au lieu de rester actif (résultat de droite).
http://forum.alsacreations.com/upload/42111-Sans-titre.png

Je pense que la cause est une mauvaise rédaction de mon code, notamment dans le html où je passe la class="icone icone-1" dans la balise <a> et non <li>, la raison est que je n'arrive pas à faire les liens du menu autrement.

Si vous pouviez jeter un petit coup d'oeil, ce serait super génial

	<ul id="menu_ul">
			<li><a class="icone icone-1" href="#"></a></li>
			<li><a class="icone icone-2" href="#"></a></li>
			<li><a class="icone icone-3" href="#"></a></li>
			<li><a class="icone icone-4" href="#"></a></li>
			<li><a class="icone icone-5" href="#">
			    <img id="menu_ul_profile" src="photo_profile2.png" alt="photo" /></a>
<!-- L'image a était enlever sur la capture d'écran -->
			    <ul class="sousmenu">
			        <li><a href="#">Settings</a></li><br>
			        <li><a href="#">Help</a></li><br>
			        <li><a href="#">Sign out</a></li>
			    </ul>
			</li>
			<li><a class="icone icone-6" href="#"></a></li>
		</ul>

/* @group Reset (un peu [smile] - Voici le fichier CSS */
html {
    font-size: 100%;
}
body {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    border: 0;
    background: url(test.png) repeat;
    color: gray;
}
li {
    list-style-type:none;
    display: inline;
}
ul, ol {
    padding: 0;
    margin: auto;
}
/* @end */
#menu_ul {
    height: 40px;
    margin-left: 70px;
}

.icone {
    height: 40px;
    float: left;
}
.icone-1 { background: url("sprites.png") no-repeat 0 -40px; width: 78px; }
.icone-2 { background: url("sprites.png") no-repeat -78px top; width: 99px; }
.icone-3 { background: url("sprites.png") no-repeat -177px top; width: 115px; }
.icone-4 { background: url("sprites.png") no-repeat -292px top; width: 92px; }
.icone-5 { background: url("sprites.png") no-repeat -384px top; width: 95px; }
.icone-6 { float: right; background: url("sprites.png") no-repeat -621px top; width: 59px; }

.icone-1:hover { background: url("sprites.png") no-repeat 0 -40px; }
.icone-2:hover { background: url("sprites.png") no-repeat -78px -40px; }
.icone-3:hover { background: url("sprites.png") no-repeat -177px -40px; }
.icone-4:hover { background: url("sprites.png") no-repeat -292px -40px; }
.icone-5:hover { background: url("sprites.png") no-repeat -384px -40px; }
.icone-6:hover { background: url("sprites.png") no-repeat -621px -40px; }

#menu_ul_profile {
    position: relative;
    top: 8px;
    left: 58px;
    width: 20px;
    height: 20px;
}
.sousmenu  {
    display: none;
    position: absolute;
    background-color: #2f3540;
    top: 40px;
    right: 200px;
    padding: 5px 5px 5px 60px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    }
li:hover .sousmenu {
	display: inline-block;
}

Modifié par Zeldemir (22 Jan 2012 - 23:11)