Liste imbriquées (display:none; - display:block;)

Bonjour à tous,

Je sèche désespérément sur un problème d'éléments imbriqués.

Voici le code html:

<ul class="navDroite">
    <li class="category">Espace 1
        <ul>
        <li><a href="espace1/doc1.html" title="">Doc1</a></li>
        </ul>
    </li>
    <li class="category">Espace 2
        <ul>
        <li class="last"><a href="espace2/doc2.html" title="">Doc2</a></li>
        </ul>
    </li>
    <li class="category">Epace 3
    <ul>
    <li><a href="espace3/doc3.html" title="">Doc3</a></li>
    </ul>
    </li>
</ul>

OBJECTIF : N'afficher que les ul n'ayant pas la class=category
A l'écran

- Doc1
- Doc2
- Doc3

j'ai essayé successivement les codes css suivants, sans succès

ul{
display:none;
}

ul ul{
display:block;
}

puis

.category{
display:none;
}

.category ul{
display:block;
}

Malgré différentes variantes, je n'arrive toujours pas à produire l'effet attendu.
Je pourrai rajouter une balise span dans le code pour encapsuler le texte contenu dans les éléments li de class=category mais j'aimerai autant trouver une solution sans recourir à une balise supplémentaire.

Toute suggestion est la bienvenue.

Merci


Modifié par heliotrope (26 Jul 2006 - 10:31)

Bonjour,

li.category {
	visibility:hidden;
	}

li.category ul {
	visibility: visible;
	}

Quelque chose dans ce gout là semble fonctionner sur FF, à voir sur IE, tiens nous au courant.

Complément de lecture pour mieux comprendre les notions d'héritages :

Comprendre l'héritage et la parenté des styles CSS
Modifié par zzzazzz (26 Jul 2006 - 13:14)