CSS en cascade sur liste

bonjour

j'ai un menu avec des ul en cascale

<ul id="MenuID">
<li></li>
<li></li>
<li></li>
<li>
	<ul>
	<li>blabla</li>
	<li class="Separateur"></li>
	<li>blublu</li>			
	<li>blabla</li>
	</ul>

</li>
<li></li>
<li></li>

</ul>

je sais agir sur le fond des li de second niveau en faisant

#MenuID li ul li 
{
	height : 	20px;
	background : #CFC080;
	margin : 	0px; 
	padding : 	0px;
	vertical-align:middle;
}

#MenuID  li ul li:hover    {background : #984428;}

Maintenant j'aimerai pouvoir mettre une image de fond et désactiver le hover sur le <li> dont la classe est "separateur" mais je n'arrive pas à trouver la syntaxe qui va bien pour forcer le style sur le li qui est renforcé par la classe "separateur".

Merci par avance pour votre aide

Bonjour,

Petit rappel sur le ciblage CSS2

S'il s'agit de générer une "séparation visuel" après le premier li, inutile d'encombrer inutilement le code html, vous pouvez passer par "du contenu généré"

#MenuID  li ul li:first-child:after {
...vos propriétés...
}

comme ceci par exemple :

#MenuID  li ul li:first-child:after {
	content: " ";  
	display: block;  
	height: 1px;  
	position: absolute;  
	width: 100%;
	background: -webkit-linear-gradient(left, hsla(0, 0%, 95%, 0.1), hsla(0, 0%, 20%, 0.75), hsla(0, 0%, 95%, 0.1));   
	background: -moz-linear-gradient(left, hsla(0, 0%, 95%, 0.1), hsla(0, 0%, 20%, 0.75), hsla(0, 0%, 95%, 0.1));   
	background: -ms-linear-gradient(left, hsla(0, 0%, 95%, 0.1), hsla(0, 0%, 20%, 0.75), hsla(0, 0%, 95%, 0.1));   
	background: -o-linear-gradient(left, hsla(0, 0%, 95%, 0.1), hsla(0, 0%, 20%, 0.75), hsla(0, 0%, 95%, 0.1));   
	background: linear-gradient(to left, hsla(0, 0%, 95%, 0.1), hsla(0, 0%, 20%, 0.75), hsla(0, 0%, 95%, 0.1));  
}

Il y a d'autres moyen, d'autres méthodes, qui dépendront de ce que vous voulez obtenir, et du niveau de rétro-compatibilité souhaité.

Bonjour

Visuellement c'est exactement ce que je voulais faire avec mon image de fond
Par contre j'ai besoin de pouvoir en placer plusieurs, à différentes positions dans les li du même ul, mais aussi dans différents sous ul.

<ul id="MenuID">
<li></li>
	<ul>
	<li>tata</li>
	<li>toto</li>
[fache]
	<li>titi</li>			
	<li>tutu</li>
[rolleyes]
	<li>tete</li>
	</ul>
<li></li>
<li></li>
<li>
	<ul>
	<li>blabla</li>
[decu]
	<li>bloblo</li>
	<li>blublu</li>
[lol]			
	<li>blabla</li>
	</ul>

</li>
<li></li>
<li></li>
</ul>

Merci, je suis dés à présent sûr de me coucher moins idiot ce soir !
Modifié par petitours220 (19 Apr 2013 - 14:56)

Vous devriez pouvoir y parvenir avec les explications de Raphaël (lien donné ci-dessus).
Faites des tests et revenez si souci

Ca y est ca tourne, merci

Mais j'ai quand même encore un soucis.

Je n'ai pas la même chose dans mes sous ul suivant que l'utilisateur est connecté ou pas en tant que membre.
Du coup, les séparateurs ne sont pas toujours à placer à la même position !

Je sais je suis pénible...