bonjour

je voudrais au passage du hover d'un smenu que le menu.hover reste

<div class="headmenu">    
<div class="menu"><span>Panier</span></div>
    <div class="smenu">
     <span>blabla</span>
    </div>
<div class="menu2"><span>login</span></div>
    <div class="smenu2">
     <span>blabla</span>
    </div>
<div class="menu3"><span>info</span></div>
    <div class="smenu3">
     <span>blabla</span>
</div>
    </div>

.headmenu{
	 position:relative; 
	 width: 100%;
}
.menu a, .menu2 , .menu3 , .menu4 a{
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:4px;
	margin:7px 10px 0 10px;
	border:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.2rem; 
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	cursor:pointer;
 }
 
 .menu:hover a, .menu2:hover, .menu3:hover, .menu4 a:hover{
 	border: 1px solid #777777;
	padding: 4px 9px;
	color:#161616;
	
	/* Background color and gradients */
	background: #f6f6f6;
	z-index: 1; 
 }
 
.smenu, .smenu2, .smenu3, .smenu4{
	position:absolute;
	width: 100%;
	height : auto;	
	top : 30px;
	left : 0;
	z-index: 2;
	font-size: 1rem;
	display: none;
	margin:4px auto;
	float:left;

	text-align:left;
	padding:10px;
	border:1px solid #487a94;
	border-top:none;

	/* Gradient background */
	background:#F4F4F4;

}
.menu:hover ~ .smenu, .menu2:hover ~ .smenu2, .menu3:hover ~ .smenu3
, .menu4:hover ~ .smenu4{
	display: block; 
}
.smenu:hover, .smenu2:hover, .menu2:hover, .smenu3:hover, .smenu4:hover{
	display: block; 
}

Salut, as-tu suivi les cours sur le HTML et le CSS disponible sur ce site ?

Car j'ai l'impression que tu ne comprend pas toi même ce que tu tape dans le code...

• exemple des <br> dans le css qui n'ont rien à faire là
• 2 display block dans .menu3 , .menu4 a

et il y a certainement d'autre choses, mais rien que ça déjà !

Ta question n'est pas suffisamment clair, tu veux que le sous-menu de smenu reste afficher même si tu met la sourie autre part ?

bonjour

les br vient d'ici quand j'ai ajouté une ligne.

le menu4 a: dans mon vrais code, il y a des liens.

quand je passe la souris sur la div menu, il ouvre le smenu, en clissant la souris sur la div smenu :  le css du menu hover s'efface...je voudrais qu'il reste.

  normalement je devrais faire comme ça:

<div class="menu"><a href="Commentaire">Livre d'or</a>
    <div class="smenu">
        <p>Voir les commentaires sur divers Articles.<br> Cliquer sur le titre pour voir l'article.</p>    
    </div>
</div>

et le css

.menu:hover  .smenu{
	display: block; 
}

mais je veut que la div smenu prend 100% de la page sans faire des modif du style margin-left: -80px;

avec le code ci dessus ça prend 100% de la div menu et pas de la page.

j'espère que tu m'a compris, je suis nul en explication.

Hello ! 

Je ne vais pas rajouter ici les remarques qui t'ont été faites plus haut, mais juste, quand tu écris du code et que tu dois publier un exemple (sur un forum par exemple), veille à ce que ton code soit propre et le plus compréhensible pour tout le monde 

Ensuite, je t'avoue que je ne comprends pas trop non plus ce que tu souhaites faire avec cette histoire de menu et de hoover... Pour le moment, ton hoover s'affiche au survol de tes deux boutons "Login" et "Info" ainsi que quand tu survoles "Panier"... Du coup, qu'est-ce que tu recherches à faire avec ce hoover ?

Ensuite, plusieurs remarques sur ton code : 

- Pas de <br> ! C'est une mauvaise pratique : ce n'est pas maintenable... L'HTML --> structure du doc, CSS --> style des éléments

A la place, c'est du CSS qu'il faut : 

.mt {
  margin-top: 0.5em;
}

.mb {
  margin-bottom: 0.5em;
}

- Pense à correctement indenter ton code (même si ça n'affecte pas le fonctionnel, c'est plus facile à lire, même pour toi ) !

<div class="headmenu">    <br><div class="menu"><span>Panier</span></div>
    <div class="smenu">
    ...

Donc, déjà, avant de faire quoi que ce soit, corrige et rend conventionnel ton code. Pour t'aider, deux outils très utiles  : 

- https://validator.w3.org/
- https://jigsaw.w3.org/css-validator/validator.html.en

Ensuite, peux-tu nous expliquer en détails ce que tu souhaites faire pour qu'on t'aide ? 

-
Edité par iSwamb 7 janvier 2024 à 21:53:04

bonjour

les "br" j'ai déja indiqué que ce n'est pas moi qui l'ai mis mais votre superbe éditeur !

quand on modifie le code ça fait n'importe quoi.

je ne vois pas comment expliqué : survole de la class menu va afficher smenu et au survole de la class smenu, je veut que le css du menu.hover soit affiché, car la il disparait . ( Avec le code de mon 1er post).

ou avec mon 2eme code: le css  du menu.hover s'affiche bien, mais la class smenu ne s'affiche pas sur toute la largeur de la page.

Bonsoir,

@tous Je confirme que si on modifie dans l'éditeur HTML du forum une portion de code insérées avec le bouton code </>, le forum ajoute des balises <br> puisque l'éditeur HTML considère que c'est une nouvelle ligne et comme cela est à l'intérieur d'un bloc qui n'est pas interpréter le code du retour ligne soit la balise <br> s'affiche.

  Pour palier ce problème quand vous éditer du code, il faut passer par l'édition HTML de votre message. C'est à dire qu'il faut cliquer sur le lien "HTML" qui ce trouve en bas à gauche de la zone où vous écrivez. Une boite de dialogue s'ouvre et c'est dans cette boite que vous devez modifier votre code. 

@maxtrident

>> je ne vois pas comment expliqué

n'explique pas ce que le code doit faire, explique en terme de fonctionnalité ce que tu attends.

Ex : En passant la souris sur le lien "Panier" un sous menu se déploie vers le bas, dans ce sous-menu se trouve différents liens et au passage de la souris sur un de ces lien ..........

Pour ma part je trouve que le code HTML du premier message de cette discussion n'as pas trop de sens. Dans le deuxième message le HTML me parais plus cohérent. 

Avant d'écrire la moindre ligne CSS tu dois avoir une structure HTML cohérente et sémantiquement valable en plus d'être dépourvue d'erreur de syntaxe (tu as les liens plus haut vers les validateurs pour t'aider à te corriger).

Pour t'aider dans la réalisation de ton menu regarde cet exemple de code : http://www.frogweb.fr/ Tu y trouvera une base de travail à adapter à ton projet.

>> mais la class smenu ne s'affiche pas sur toute la largeur de la page.

Un position: absolute; pour faire sortir le bloc du flux courant (avec un position: relative; sur le parent ou un ancêtre pour servir de référent de positionnement bien évidement),  un z-index si nécessaire pour passer au dessus du contenu qui suit le menu, right: 0; left: 0; pour que ce sous menu prenne tout l'espace disponible soit la largeur de la page (pas de width: 100% sur un élément positionner).

Bref réalise d'abord le HTML correct et on t'aidera pour le CSS.

-
Edité par AbcAbc6 8 janvier 2024 à 0:41:02