Problème de :hover

Bonjour,
J'essaie de créer un menu dont les sous-items n'apparaissent qu'au survol de l'item parent, et ce, verticalement (le menu de base étant bien classiquement une barre horizontale)
C'est sur un Prestashop, avec un module non prévu pour cela mais qui permet d'ajouter du HTML pour créer les sous-menus.

Donc dans la barre horizontale, j'ai des items de menu, dont item1.
Au survol de celui-ci, j'ai 2 items qui doivent apparaître dans une barre horizontale sous la barre du menu. Appelons-les items-level-deux. La barre doit avoir un fond blanc.
Au survol d'un de ces 2 items, un bloc doit apparaître contenant une liste de liens en 2 colonnes. Appelons ce bloc items-level-trois. Chaque bloc doit avoir un fond blanc. Mais juste sur la largeur du bloc.

Si, en HTML, je fais ceci

<span class="item-level-deux">Premier item</span>
<table>Bloc contenant les sous-menus</table>

et qu'en css je mets

table {display:none;}
span:hover table {display:block;}

Ca marche. Mais le souci est que je dois les séparer pour que le niveau 2 prenne la largeur de la page et soit sur fond blanc, et que le bloc à afficher se positionne correctement sous l'item, et ait un fond blanc séparé.
De plus, comme il doit y avoir 2 items-level-deux, je suis coincée.

Donc j'ai essayé comme ceci (entre autres)

<div class="level-deux">
<span class="level-deux-un">Premier item</span><span class="level-deux-deux">Second item</span>
</div>
<table class="table-un">Bloc contenant les sous-menus</table>

Et c'est là que ça coince pour afficher la table quand on passe sur le span.
Voici divers essais :

.level-deux span:hover table {display:block;}
.level-deux span:hover + table {display:block;}
.level-deux span:hover ~ table {display:block;}

etc...
Rien ne marche
Je joins un schéma pour le cas où mes explications ne seraient pas très claires.
Je sais qu'on peut le faire en js mais là, mes connaissances sont plus que limitées !

Merci d'avance pour vos conseils éclairés !

Coucou, tu peux mettre tes tentatives en situation juste ici ? https://codepen.io/

Salut,

kamilane a écrit :

et qu'en css je mets

table {display:none;}
span:hover table {display:block;}

Ca marche.

Je ne vois pas comment ça peut marcher avec le code que tu as donné... le sélecteur

span table {}

sélectionne les elements table à l'intérieur d'élements span. La c'est pas le cas.

kamilane a écrit :

.level-deux span:hover table {display:block;}
.level-deux span:hover + table {display:block;}
.level-deux span:hover ~ table {display:block;}

etc...
Rien ne marche

Ici pareil. Niveau sélecteur c'est pas bon.

.level-deux span:hover table

sélectionne le table dans un span survolé lui meme dans un élément avec la classe level-deux

.level-deux span:hover + table

sélectionne le table frère direct d'un un span survolé lui meme dans un élément avec la classe level-deux

.level-deux span:hover ~table

sélectionne le table frère indirect d'un span survolé lui meme dans un élément avec la classe level-deux

Ton table n'est pas le frère d'un span. Il est un cran au dessus dans la hiérarchie et ca c'est pas encore possible en CSS.

Exemple : https://jsfiddle.net/undless/zb0ckojg/3/

Bonne journée