display: none n'est pas appliqué

bonjour

j'ai une liste horizontale centrée. Les item de cette liste vont (dans le futur) ouvrir des sous-listes au survol.
Pour le moment je veux que ces sous-listes soient masquées.
J'ai donc logiquement écrit le code suivant
:
Code:

1 2 3 4 #nav { text-align: center; } #nav li { display: inline; list-style: none;} /* horizontale et sans puce*/ #nav>li>div{display:none} /* pas d'affichage de div*/ #justif{margin-left:5px;text-align:justify}
et en html
Code:

1 2 3 4 5 6 7 8 9 10 11 <ul id="nav"><li><a href="#">Menu1</a></li> <div> <h3>sous-liste</h3> <ul id="justif">  <li><a href="truc"> item</a></li> <li>item</li> ... </ul> </div> <li><a href="#">Menu2</a></li> </ul>
quelqu'un peut-il m'expliquer pourquoi mon display=none n'est pas appliqué ? "sous-liste" et les item apparaissent sur la page.

Il y a quelque chose dans la manière de fonctionner du html que je ne pige pas du tout. Il n'y a pas que ce "none" ; j'ai très souvent ce problème, par exemple une déclaration explicite de position n'est pas appliquée. Par exemple "center" ne centre que quand il veut ... les "inline", un coup ça marche, un coup ça marche pas. Ailleurs j'ai écrit explicitement p{text-align:justify}, parce que par défaut c'est centré et bien mon texte reste centré et html se contrefiche de mon justify etc
J'ai pourtant l'habitude d'un langage de description avec LaTeX que je manie très bien mais vraiment html je ne comprends pas

Merci pour toute explication.

Bonjour,

Citation:

quelqu'un peut-il m'expliquer pourquoi mon display=none n'est pas appliqué ?

mais avec grand plaisir, simplement car aucun élément dans ton code ne répond au sélecteur utilisé :mrgreen:
Code:

1 2 3 #nav > li > div { display:none }
... le sélecteur cible un élément <div> enfant direct d'un élément <li> lui même enfant direct d'un élément ayant pour id="nav", lecture de droite à gauche.
Reprend le code fourni, cet élément n’existe pas !

Citation:

Il y a quelque chose dans la manière de fonctionner du html que je ne pige pas du tout.

Dans ce cas il faut revenir au base ;)

Citation:

Ailleurs j'ai écrit explicitement p{text-align:justify}, parce que par défaut c'est centré et bien mon texte reste centré et html se contrefiche de mon justify etc ...

... non, cela fonctionne très bien mais il faut que la justification puisse se justifier donc il faut au moins que le contenu dépasse la largeur du conteneur

Ressource :

6.1. Text Alignment: the text-align shorthand

Bon d'accord j'ai fermé mon "li" un peu trop tôt :oops:
mais ça n'a fait que reporter le problème.
Si en effet les listes sont masquées je veux quand même qu'elles apparaissent au survol. Or si j'ajoute
Code:

1 2 #nav>li:hover>div{display:flex;backgroung:#A57110} #nav>li:hover{color:green}
le comportement est étrange car ma sous-liste n'apparait pas du tout au survol mais si je tire un peu sur "Menu1" de surcroît ce n'est pas "Menu1" qui apparait en vert mais le contenu du <div>
Je n'ai pourtant fait que recopier un truc qui fonctionne sur une autre page ou en effet
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 nav > ul > li > a { display: block; width: 150px; height: 40px; font-size:32px; font-family:"carolingia" } nav > ul > li > div{ display: none; position: absolute; left: 0; } nav > ul > li:hover > div{ text-align:center; display: flex; background: #A57110; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <nav> <ul> <li> <a href="#">Menu1</a> <div> <div id="liste"> <h3>sous-liste1</h3> <ul id="justif"> <li><a href="#">item</a> </li> <li><a href="#">item</a> </li> </ul> </div> <div id="liste"> <h3>sous-liste</h3>
fonctionne!
Et je ne vois pas du tout la différence, hormis "#" ou pas "#"

Quand à mon <p> il est vrai qu'il contient des sauts de lignes <br> mais un texte justifié se doit d'aligner les débuts de toutes les lignes. Concrètement mon <p> contient 3 lignes et je veux qu'elles commencent toutes au même endroit.