Bonjour à tous, j'essaie d'integrer un menu déroulant a mon site, mais impossible de faire fonctionner le hover, et je ne comprend pas pourquoi, si vous pouviez me donner un coup de main ça serai top !

Voici les codes

Html

<ul>
    <li><a href=index.php>Accueil</a></li>
    <li><a href=Activités.php>Activités</a></li>
    <li><a href=espace_membre.php>Espace membre</a>
        <ul class="sous_menu">
            <li><a href=profil.php>Votre profil</a></li>
        </ul>
    </li>
  <li><a href=Contact.php>Contact</a></li>
  
  <li><a id="connexion" href=espace_membre.php>
<?php
if (isset ($_SESSION['nom']) && ($_SESSION['prenom']))
{
     echo ('Bienvenue '.$_SESSION['nom'].' '.$_SESSION['prenom'].' !'); 
}
else
{
    echo ('Vous n\'êtes pas connêcté');
}
?>
</a></li>
</ul>

CSS

ul {
	text-align: center;
    list-style-type: none;
    margin-right: 0%;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: 1%;
    border-radius: 10px;
}

li {
	vertical-align:top;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover .sous_menu {
    font-size: 200px;
    display: block;
}

.sous_menu {
    display: none;
    color: green;
}

Merci d'avance !!

-
Edité par Romain44478965 24 juillet 2018 à 21:52:31

Salut,

Tu peux cibler directement le li plutôt que le a. Ainsi, dès que tu passe sur le bouton, le sous-menu s'affiche, pas besoin d'absolument survoler le lien :

li:hover .sous_menu {
    display: block;
}

 Edit : Si toutefois tu tiens absolument à survoler le a pour afficher le sous-menu il suffit de changer le sélecteur :

li a:hover ~ .sous_menu {
    display: block;
}

Jusqu'ici tu indiquait de passer en display block un li qui était supposé être dans le a. Alors que le li en question est un voisin du a et non pas un enfant !

Tiens-nous au courant

-
Edité par Offkors 25 juillet 2018 à 10:29:21

Salut,

dans tous les cas il faut faire le :hover sur le <li>.
Même li a:hover ~ .sous-menu ne fonctionnera pas.

En effet, si tu met le :hover sur le <a>, le sous menu va bien s'ouvrir mais tu ne pourras pas aller dessus puisque le sous menu n'est pas dans le <a>.
Tu quittera donc le survol du <a>.
Par contre, avec le :hover sur le <li>, le sous menu étant dedans, tu survole toujours le <li> du menu.

C'est clair ?

Sinon, hop ! tu clic dans ma signature

Salut à toi ! Oui c'est clair, c'est d'ailleurs ton site qui m'a permis de modifier cela ! Merci pour ta reponse !

par contre je n'arrive a les faire se positionner les un en dessous des autres, pourrais tu m'éclairer ?

ul {
	text-align: center;
    list-style-type: none;
    margin-right: 0%;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: 1%;
    border-radius: 10px;
}

li {
	vertical-align:top;
	display: inline-block;

        position: relative;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.sous_menu {
    display: none;
}

li:hover .sous_menu {
    display: block;
}

et autre chose, quand je survol, il y a toute la barre ul qui descend, mais j'aimerai qu'elle ne s'agrandisse que pour les onglets menu deroulant

Voici le liens du site si ça peut vous aider : 

http://escalade-aventure.online/espace_membre.php

c'est un crash test, il ne faut pas trop regarder les textes et la mise en page hein ;-)

Merci 

-
Edité par Romain44478965 25 juillet 2018 à 12:27:15

Il faut que tu positionne le sous menu en absolute et que tu mette le display des <li> de sous menu en block.
En clair, ce qui devrait fonctionner, à condition que tu mette une classe à ton <ul> de menu (par exemple menu...) :

- mettre position:relative à .menu
- mettre position:absolute; left:0;right:0 à .menu ul
- mettre display:block à .menu ul li li

J'ai regardé le reste du code, c'est <br>ou <br />ou <br/> mais pas </br>

-
Edité par Frogweb 25 juillet 2018 à 12:41:51

Meric pour ta reponse ! j'ai testé en local mais ça ne fonctionne pas, les sous menu n'apparaissent plus :

ul {
	text-align: center;
    list-style-type: none;
    margin-right: 0%;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    margin-top: 1%;
    border-radius: 10px;
	position: relative;
}

li {
	vertical-align:top;
	display: inline-block;
	position: relative;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li:hover .sous_menu{
    color: green;
    display: block;
}

.sous_menu li:hover ul {
	margin-right: 20px;
	
}

.sous_menu {
   display: none;
}

.menu{
	position: relative;
}

.menu ul {
	position: absolute;
	left: 0;
	right: 0;
}

.menu ul li li {
	display: block;
}

Rhaaalala...

Il faut que tu mette une class="menu" sur ta première <ul>.

Mais bon, en même temps je t'ai mis une mauvaise ligne :
.menu ul li li ce n'est pas bon, c'est .menu ul li qu'il faut mettre.

Ensuite tu mets overflow:hidden sur ton <ul> de menu et évidement comme le sous menu est en absolute et donc qu'il sors du flux il est caché.

Pourquoi tu ne reprends pas tout simplement le code de cette page :
http://www.frogweb.fr/menu-deroulant-horizontal/

Du coups j'ai suivie tes conseils en reprenant le code déjà existant (je n'avais même pas regarder pensant que ça n'était pas ce que je voulais, désolé !) Je te remercie beaucoup pour ton aide et pour les infos que tu as mis en ligne !

Bonjour, je rencontre également le même type de problème mais même en suivant tout les conseils et tutoriel sur internet. Cela ne marche pas pour l'affichage des sous menu.

Voici mon code:

<body>
	<header>
		<h1><a href="Index.html">飛機旅行</a></h1>
		<nav>
			<ul>
				<li class="shop"><a href="File/Shop.html">商店</a></li>
					<ul class="submenu">
						<li><a href="File/Sub/Confort.html">服食</a></li>
						<li><a href="File/Sub/Hygiene.html">衛生</a></li>
					</ul>
				<li class="service"><a href="File/Service.html">服務</a></li>
					<ul class="submenu">
						<li><a href="File/Sub/TripAdvise.html">流行旅遊地點</a></li>
						<li><a href="File/Sub/TripTrack.html">飛機上的撇步</a></li>
					</ul>
				<li class="else"><a href="File/Else.html">其它</a></li>
					<ul class="submenu">
						<li><a href="File/Sub/WAU">我們是誰</a></li>
						<li><a href="File/Sub/Contact">聯絡我們</a></li>
					</ul>
			</ul>
		</nav>
	</header>

</body>

Et voici le code CSS

body{
	margin: 0px;
	padding: 0px;
}

nav{
	width: 100%;
	background-color: #424558;
}
nav > ul{
	margin: 0px;
	padding: 0px;
}

nav > ul::after{
	content: "";
	display: block;
	clear: both;
}

nav > ul > li{
	float: left;
	position: relative;
}

nav > ul > li > a{
	padding: 20px 30px;
	color: #FFF;
}

nav li{
	list-style-type: none;
}

.submenu{
	display: none;
}

nav a{
	display: inline-block;
	text-decoration: none;
}

nav li:hover .submenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 1000;
}

.submenu li{
	border-bottom: 1px solid #CCC;
}

.submenu li a{
	padding: 15px 30px;
	font-size: 13px;
	color: #222538;
	width:270px;
}

Merci pour votre aide

Bonjour.

Un élément ul ne peut pas être un enfant direct d'un autre élément ul.

Alors que tu as fait l'erreur dans toute la structure HTML, commences donc par corriger ça avant de revenir sur le forum et de créer ton propre sujet.

@AndyBeRaharison Bonjour, merci de créer votre propre sujet, mais avant de lire attentivement ce sujet, visiter le site de frogweb pour avoir la solution à votre problème. 

Passer votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.