Liste/menu à 2 niveaux : problème d'héritage

Bonjour à tous,

j'ai une liste à deux niveaux avec les propriétés suivantes :

#nav ul { /* toutes les listes */
	padding: 0;
	margin: 0;
	list-style: none;
	z-index:1;
}
/* listes de premier niveau */
#nav li {
	float: left;
	width: 83px;
	border-right: 1px solid #fff;
	height: 30px;
	line-height: 30px;
}
/* listes de deuxième niveau */
#nav li ul { 
	position: absolute;
	background: #bfe5e4;
	width: 120px;
	left: -750em; } /* ça c'est pour faire un menu déroulant avec du js en +*/
}

Voici la liste :

<ul>
<li><a href="#">Premier niveau</a>
<ul>
<li><a href="#">Deuxième niveau</a></li>
<li><a href="#">Deuxième niveau</a></li>
<li><a href="#">Deuxième niveau</a></li>
</ul>
</li>
<li><a href="#">Premier niveau</a>
<ul>
<li><a href="#">Deuxième niveau</a></li>
<li><a href="#">Deuxième niveau</a></li>
<li><a href="#">Deuxième niveau</a></li>
</ul>
</li>
</ul>

Mon problème c'est que la bordure droite du premier niveau apparait dans le deuxième niveau. Comment annuler "l'héritage" du premier par le second niveau ?

Salut Caroder,
Tu as essayé d'affecter une

 border-right: 0;

à ton élément enfant ?

Logiquement ça supplante l'héritage

La solution

border-right: 0

ne fonctionne pas sur l'élément enfant. Je pars à la pêche d'autres infos et je fais un retour sur le sujet si je trouve la solution...