Double Menu déroulant HTML/CSS

Bien le bonjour, pour un cours il m'est demandé de faire un double menu déroulant or nous ne pouvons pas utiliser les balises <ul> et <li>. Je souhaite le faire dans "Mes établissement qui mènerait à "IUT" et "Pré-bac" qui proposerait alors "mon lycée" et mon "collège", j'ai bien essayer certaines choses mais je n'y arrive pas. Voici mon html:

<nav>
			<div class="menu1">
				<a class="nav-even" > Mes établissements </a>
					<div class="etablissement">
						<div class="menu2">
							<a class="nav-even" > Pré-bac </a>
							<div class="prebac">
							<a href="#"> Mon lycée </a>
							<a href="#"> Mon collège </a>
							</div>
						</div>
						<a href="#"> Mon IUT </a>
					</div>
			</div>
				
			<div class="menu1">
				<a class="nav-odd" > Ma ville </a>
					<div class="ville">
						<a href="https://www.nancy.fr/"> Nancy </a>
					</div>
			</div>
			
			<div class="menu1">
				<a class="nav-even" > Mes sites favoris </a>
					<div class="site">
						<a href="https://animedigitalnetwork.fr/"> ADN </a>
						<a href="https://www.netflix.com/fr/"> Netflix </a>
					</div>
			</div>
			
			<div class="menu1">	
				<a class="nav-odd" > Recherche </a>
					<div class="menu-sub">
						<a href="https://www.google.fr"> Google </a>
						<a href="https://duckduckgo.com/"> DUCKDUCKGO	</a>
						<a href="https://www.qwant.com/"> QWANT </a>
					</div>
			</div>
		</nav>	

Et mon CSS:

nav {
	margin: 10px;
	display: flex;
	text-decoration: none;
    text-align: center;
	justify-content: space-between;
}

nav a{
	line-height: 2em;	
	display: block;
	border: 2px solid #FA8072;
	width: 170px;
}

nav a:hover {
	border-color: red; 
}

.menu1 {
	position: relative;
}

.menu2 {
	position: relative;
}

.prebac{
	position: absolute;	
	left: -999em;
	width: 174px;
	top:0;
}

nav a:hover+ .prebac{
	display: block;
}

.prebac:hover{
	display: block;
}

.etablissement, .ville, .site, .menu-sub {
	width: 174px;
	text-align: center;
	text-decoration: none;
}

.etablissement{
	background-color:gray;
	display: none;
	position: absolute;
}

nav a:hover + .etablissement {
	display: block;
}

.etablissement:hover{
	display: block;
}

.ville{
	background-color:Silver;
	display: none;
	position: absolute;
}

nav a:hover + .ville {
	display: block;
}

.ville:hover{
	display: block;
}

.site{
	background-color:gray;
	display: none;
	position: absolute;
}

nav a:hover + .site {
	display: block;
}

.site:hover{
	display: block;
}

.menu-sub {
	position: absolute;
	display: none;
	background-color: silver;
}

nav a:hover + .menu-sub {
	display: block;
}

.menu-sub:hover {
	display: block;
}

Merci d'avance pour votre aide
Modifié par LeFalwe (11 Nov 2019 - 21:48)

Je peux poser une question con ? Pourquoi ne peut-on pas utiliser de listes?
C'est à mon sens le meilleur parti pour un menu...

Je me doute bien mais il s'agit d'une matière où nous apprenons l'HTML et le CSS et nous nous sommes déjà servis des listes, il faut que nous trouvions une autre manière de faire ce double menu déroulant, qui est d'ailleurs le dernier exercice avant le partiel.

Salut

Je comprend pas ton

.prebac{
	position: absolute;	
	left: -999em;
	width: 174px;
	top:0;
}

Du coup, tu risque pas de le voir ce sous menu ? vu qu'il est a -999em..

parce que du coup, ici :

nav a:hover+ .prebac{
	display: block;  
}

tu as beau le mettre en display block tu risque pas de le voir.

il faudrait rectifier la position left :

  nav a:hover+ .prebac{
	display: block; 
      left: 10.7em; 
}

exemple ici : https://codepen.io/JUSEN/pen/PoodqvM
Modifié par JENCAL (12 Nov 2019 - 12:36)

J'avais tenté certaine chose mais je n'y arrivais pas, grâce à vous il s'affiche enfin dans je passe la souris sur "prébac", j'ai juste réajuster à 11.5 pour qu'il apparaisse juste à coté, maintenant le problème est que si je met la souris sur "collège" ou "lycée", ils disparaissent.

  nav a:hover+ .prebac{
	display: block; 
      left: 11.5em; 
}

oui maintenant il faut "coder" le :hover du college/lycée pour ses "parents" restent visible
Modifié par JENCAL (12 Nov 2019 - 14:10)

Et puis il ne faut pas oublier que le :hover, sur mobile ça marche pas hein... vaut mieux un click.

Pourriez-vous m'indiquer comment faire pour qu'il reste visible ?
Après c'est juste un exercice pour apprendre l'HTML et le CSS, le site de l'exercice ne sera pas utilisé sur mobile !

Bonjour,

beaucoup de mauvaises pratiques avec cet exercice (oui oui ce n'est qu'un exercice m'enfin là ça fait beaucoup)
- nav ul li a est la structure à utiliser pour un menu de navigation
- avec du JS, le résultat est bien plus accessible que les solutions en CSS pur (par contre c'est horriblement compliqué, merci Adobe pour leur script) sans parler du mobile (mais les mobiles imitent le :hover, plus ou moins 'fin faut tester
- les largeurs figées en pixels, argh. La moindre modif (police pas chargée, OS X vs Windows, 1 niveau de zoom, etc etc) et c'est inutilisable, assez embêtant pour la nav° . left: 100% ou left: calc(100% + 4px) s'adaptent à la largeur de la référence, sans graver dans le marbre que la réf. c'est 170px (cas imaginaire, j'ai pas regardé si c'était à ça que s'appliquait les 170px…)
- il faut être un r0x0r de la souris pour arriver à utiliser un 2e niveau de liens qui se referme après 1ms en dehors de la cible. Trackpads et personnes avec de légers tremblements vont bien se marrer à utiliser ça. JS permet de temporiser 100-300ms par exemple avant de refermer.
- la nav° au clavier sera laissée pour compte

Tout ceci étant dit, je pense que ton souci avec le 2e niveau vient de l'élément de 1er niveau sur lequel tu appliques le :hover.
Quand un lien est survolé (a:hover), son parent est également survolé. Et l'ensemble de ses ancêtres. Choisis le bon pour le placer au milieu de ton sélecteur affichant un lien de 2e niveau

Felipe a écrit :

beaucoup de mauvaises pratiques avec cet exercice (oui oui ce n'est qu'un exercice m'enfin là ça fait beaucoup)

Suis d'accord...

Jean-Pierre-Bruneau a écrit :

Trés bien ton exemple mais pour aller cliquer Mon Lycée tu fais comment

Bah faut revoir tout le truc... la position absolute te casse le deuxieme hover.... donc en soit tu peux pas, le but été de "l'afficher" pas de pouvoir "cliquer" dessus