Bon, voilà.

Toujours dans le css sans faire de modif du HTML, je dois faire en sorte que...selon cette image :

qu'au survol du curseur de la souris, chaque menu indépendamment fait l'effet comme d'embossage(?) comme menu 1 sur la photo et aussi le "?" pour la section aide.

Je donne le code HTML en premier :

    <header>
        <img src="ressources/Images/cegep.png" alt="logo">
        <div id="menu">
            <ul>
                <li><a href="#section1">Menu 1</a></li>
                <li><a href="#section2">Menu 2</a></li>
                <li><a href="#section3">Menu 3</a></li>
            </ul>
            <div id="aide-icon">
                ?
                <div id="section-aide">
                    <h1>Ceci est la section d'aide</h1>
                    <p>Lorem ipsum dolor sit amet, </p>
                </div>
            </div>
        </div>

    </header>

En suite  le code css et en mauve, comment je me suis pris...

body 
	{
		background-image: url("../Images/fond.jpeg");
		background-size: 25% 25%;
		background-repeat: repeat;
	}

#aide-icon:Hover #section-aide 
	{
		 display: block; 
	}	

#section-aide
	{
		 position: fixed;
		 top: 50%;
		 left: 50%;
		 transform: translate(-50%, -50%);
		 width: 50%;
		 height: 50%;
		 background-color: khaki;
		 padding: 30px;
		 opacity: 0.95;
		 border: 2px solid blueviolet;
		 overflow: hidden;
		 display: none;
	}

header
	{
		position: fixed;
		width: 100%;
		background-color: khaki;
		border-top: 3px solid blueviolet;
		border-bottom: 6px solid blueviolet;
	}
	
	/*Logo*/
header li, header img
	{
	    float: left;
		display: flex;
        flex-direction: row;		
	}
  	
	
div ul 
	{
		position: absolute;
		margin-left: 155px;
		margin-top: 5px;
		width: 65%;
		font-family: Courier New;
	}
	
header img
	{
		width: 150px;
	}

header ul li 
	{
		display: inline-block;
	    height: 40px;
		list-style-type: none;
		margin: 20px;	
	}	

#aide-icon, header ul li 
	{
		font-family: Georgia;
		text-transform: capitalize;
		font-size: 2em;
	}

header ul li a href
	{
		text-decoration: none;
		color: black;
		padding: 20px;/*vérifier*/
	}
	
#menu:hover, #aide-icon:hover 

 { 

 box-shadow: 5px 5px 30px brown;

 border: 2px solid brown;

 }

#aide-icon	
	{
		float: right;
		margin: 30px;
		padding: 5px;
		width: 50px;	
	}

Maintenant, 2 photos du mauvais résultat quand je survol le curseur au-dessus des menus... 1 = avant survol, 2 = au moment du survol :

Alors, que puis-je faire pour obtenir le résultat souhaité s'il vous plait ?

Bonjour,

ça n'est pas au hover du menu que tu dois mettre la bordure et l'ombre, mais au hover des liens dans le menu.

Si tu sais que tu n'auras jamais de liens dans la partie d'aide, tu peux cibler #menu a:hover, #menu a:focus ; mais je conseillerai plutôt de modifier le HTML et de donner une classe aux liens, genre .menu-link. Oh, et donne-leur display: block afin qu'ils prennent bien toute la largeur du <li>.

Non, c'est pour un exercice et il a une consigne de ne pas modifier le HTML...

Mais, j'ai en partie trouvé la solution :

li:hover, #aide-icon:hover
	{
		box-shadow: 5px 5px 30px brown;
		border: 2px solid brown;	
	}

Le problème est que ça ne le fait pas seulement au li du header, mais aussi aux autres li des autres sections.... :-(

Ha !... mais je viens d'essayer ton code et ça fonctionne merveilleusement bien :-)

Je sens que je vais avoir des questions les prochains jours, heures ;-)