[Résolu] Placement Background image + texte dans une liste

Bonjour,

alors voilà j'ai un petit soucis pour placer une image sous un texte. A priori pas de problème particulier pour faire ceci, mais cela ce complique car je souhaite ajouter du jquery sur l'image.

voici mon idée:
je fait un menu déroulant (horizontal puis vertical pour les sous menus). Pour les sous menus, je souhaite qu'au survole de la souris, un background image apparaisse progressivement en jouant sur l'opacité. Sinon le fond est blanc.

donc j'ai regarder plusieurs tutos ainsi que décortiquer certain site et je suis arriver à cette conclusion:
pour pouvoir faire cela il faut que mon sous menu ai cette structure:

<ul>
   <li><a href="#">mon texte<span class="hover"></span></a></li>
</ul>

la classe hover accueil l'image de fond à qui j'appliquerai l'opacité jquery.

Mon soucis je n'arrive pas à faire passer le texte au dessus de l'image de fond (hors animation pour le moment)

ce que j'ai réussi à faire:
* l'image de fond "hover" passe en dessous du texte mais aussi du sous menu ( fond blanc )
* l'image de fond "hover" passe au dessus de tout.

voici mon code:

<div id="nav">
    <script type="text/javascript" src="themes/<?php echo $theme; ?>/js/jquery.anim.js"></script>
    <ul id="navigation">
        <?php 
            if($user)
            {
                $acces_user = $user[1];
            }
            else
            {
                $acces_user = 0;
            }
            $sql = mysql_query("SELECT id, titre, url, niveau FROM ".MENU_CATE_TABLE." ORDER BY pos");
            while(list($id, $titre, $url, $nivo)=mysql_fetch_array($sql))
            {
                if ($acces_user >= $nivo)
                {
                    $sql2 = mysql_query("SELECT titre, url, niveau FROM ".MENU_TABLE." WHERE cate_id=".$id." ORDER BY pos");
                    if(mysql_num_rows($sql2)>0) 
                    { 
                        echo "<li><a href=\"".$url."\">".$titre."</a><img id=\"spear\" src=\"themes/". $theme ."/images/spear.png\" />\n";
                        echo "<ul class=\"sous-menu\">\n";
                        while (list($SM_titre, $SM_url, $SM_niveau)=mysql_fetch_array($sql2))
                        {
                            if ($acces_user >= $SM_niveau)
                            {
                                echo "<li><a href=\"".$SM_url."\">".$SM_titre."<span class=\"hover\"></span></a></li>\n";
                            }
                        }
                        echo "</ul>\n";
                    }
                    else
                    {
                        echo "<li class=\"no-sous-menu\"><a href=\"".$url."\">".$titre."</a><img id=\"spear\" src=\"themes/". $theme ."/images/spear.png\" />\n";
                    }
                    
                    echo "</li>\n";
                }
            }
        ?>
    </ul>
</div>

#navigation{
	width:1250px;
	height:51px;
	background:transparent url(images/menu.png) repeat-x scroll 0 0;
	
	border: 2px solid #d4d4d4;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	font-size: 18px;
	text-transform: uppercase;
}
#navigation li
{
	margin-top:7px;
	margin-left:10px;
	float: left;
	position: relative;
	list-style: none;

}
#navigation img
{
	margin-top:-60px;
	margin-right:-5px;
	float: right;
	position: relative;
	list-style: none;
}
#navigation a
{
	color:#fff; 
	text-decoration:none;
	display: block;
	padding:  8px 20px 25px 20px;
	margin: 0;


}
#navigation > li:hover > a
{
	color:#a61414;
	background-color:#FFFFFF;
	
	-webkit-border-radius:10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-box-shadow: 0px 5px 5px #000000;
	-moz-box-shadow: 0px 5px 5px #000000;
	box-shadow: 0px 5px 5px #000000; 
}

.no-sous-menu:hover a
{	
	color:#a61414 !important;
	background:none !important;
	
	-webkit-border-radius:0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
	
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	
	text-shadow: 0 1px 1px rgba(0, 0, 0, .9);
}


#navigation ul li:hover a, #navigation li:hover li a {
	background: none;
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none; 
	
	-webkit-border-radius:0;
	-moz-border-radius: 0;
	border-radius: 0;
}

#navigation ul a:hover
{	
	color:#fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}


#navigation ul
{
	width: 230px;
	margin:0;
	padding:0;
	display:none;
	position:absolute;
	top:46px;
	left:50px;	
	
	background: #ffffff !important; 
	
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-topright: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	
	-webkit-box-shadow: 0px 5px 5px #000000;
	-moz-box-shadow: 0px 5px 5px #000000;
	box-shadow: 0px 5px 5px #000000; 
}

#navigation ul li
{	
	margin:0;
	float:none;
	padding:0;
}
#navigation ul li > a
{
	color:#000; 
	font-weight: normal;
	
	font-size: 12px;
	padding: 15px 0 15px 10px;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
	text-decoration:none;	
}
#navigation ul li a > span.hover
{
	float:left;
	position:relative;
	margin-top: -29px;
	margin-left:-10px;
	background:transparent url(images/sous-menu.png) repeat-x scroll 0 0;
	padding: 44px 230px 0px 0px;
}
#navigation ul li:first-child a, #navigation ul li:first-child span.hover{
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
}
#navigation ul li:last-child a, #navigation ul li:last-child span.hover{
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

le css a pas mal bouger du fait des tests donc du coup y a surement des incohérences mais je ne les vois pas

merci d'avance pour votre aide
Modifié par snoups58 (28 Dec 2010 - 21:58)