Menu deroulant ne s'affiche pas

5 mars 2019 à 9:15:23

Bonjour à tous, j'ai un problème je dois faire un menu déroulant vertical je ne comprends pas pourquoi mais normalement quand on affiche la souris sur "l'esport" sa doit afficher 2 section a droite mais rien ne s'affiche je vois pas pourquoi.

code html :

<html>
<head>
    <title>L'e-sport</title>
    <link rel="stylesheet" type="text/css" href="Default2/default.css">
    <meta charset="UTF-8">
</head>
<body>
 <nav>
    <ul>
        <li class="realmenu"><a href="#">Acceuil</a>
        <li class="realmenu"><a href="#">L'e-sport</a></li>
            <ul class="sousmenu">
                <li><a href="#">L'e-sport c'est quoi ?</a></li>
                <li><a href="#">Son evolution</a></li>
                <li><a href="#">La triche</a></li>
            </ul>
        <li class="realmenu"><a href="#">Galerie</a>
        <li class="realmenu"><a href="#">Contact</a>
</body>
</html>

code CSS :

.realmenu  { /* Pour le menu principal */
    list-style-type: none;
    margin: 0px;
    padding: 0px; 
} 
.sousmenu { /* Pour les sous-menus */
     list-style-type: none; 
     margin: 0px;
     padding: 0px;
}
 
ul ul{display: none;}  
li:hover ul.sousmenu, li li:hover ul.realmenu {display:block;}

Craaftx

5 mars 2019 à 12:58:20

Bonjour,

Tu ouvres tes balises de liste (li) mais tu ne les fermes jamais, du coup le tout est considéré comme un seul item li

Exemple : <a href="#">Acceuil</a> est faux <a href="#">Acceuil</a> est vrai

Tu oublies aussi de fermer beaucoup d'autres balises fait attention (nav, ul, etc)

Ceci devrait résoudre ton problème

Développeur Front-End et CSS Wizard : https://guilmaindorian.com

GregoryDijoux1

5 mars 2019 à 13:24:17

Oui j'ai réussi au final lol j'ai chercher pendant longtemps xD j'ai relu un nombre incalculable de fois mais j'ai réussi a faire parvenir a ce résultat mais j'aimerais que l'image soit a coté du menu et de le centrer verticalement et horizontalement si possible:

Craaftx

5 mars 2019 à 17:14:24

Désolé pour le message de ce matin, j'ai eu des petits bugs avec Markdown et sa a effacé des parties de mon message mais tu l'as résolu tout seul au final.

Bref, je ne comprends pas trop certains points :

Ou veut tu mettre cette image exactement ?
Menu Vertical ou Horizontal ?
Center verticalement et horizontalement, donc que ton menu soit au milieu de la page ?

Développeur Front-End et CSS Wizard : https://guilmaindorian.com

GregoryDijoux1

5 mars 2019 à 17:54:59

Enfaite je dois arriver a un résultat comme sur la photographie avec les appareil mais je comprends pas je suis arriver au 2eme screen j'ai essayer plein de variante je me suis un peux perdue lol

voila ou j'en suis je comprends pas comment le mettre a coté de l'image et centrer tout au centre j'ai envoyer un mail a mon prof qui m'a parler de conteneur mais je me souviens plus du tout de ce que c'est >< je vois pas c'est ou mon erreur ><

En tout cas merci de ton aide.

GregoryDijoux1

25 mars 2019 à 12:01:49

Bonjour je relançe ...(je n'arrive pas a mettre le menu a coté de l'image)

Le code html :

<!DOCTYPE html>
<html>
<head>
	<title>E-Commerce</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<table>
		<tr>
			<td class="pagetd">
	<div class="page">
		
		<nav>
			<center><img src="img/outile.jpg"/></center>
			<ul class="menu">
				<li> <a href="#">Acceuil</a></li>
				<li><a href="#">Les produits</a>
					<ul>
						<li><a href="#">Outillage</a></li>
					  
				    </ul>
				</li>
				<li><a href="#">Nous contacter</a></li>
			</ul>
		</nav>
	</div>
</td>
</tr>
</table>
	

</body>
</html>

et le code CSS :

.menu {
	background-color: grey;
	width: 120px;

}

.menu {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.menu li{
	position:relative;
}
.menu  ul {
	list-style-type: none;
	
	padding: 0px;
	background-color: grey;
	width: 120px;
	margin-top: 0px;
}

.menu ul {
	display:none;
}

.menu li:hover ul {
    display: block ;
    position: absolute;
    top: 0px; 
    left: 110px; 
     
}

.menu a {
	display: block;
    width: 105px;
    height: 30px;
    line-height: 30px;
    padding: 3px 10px;
    text-align: center;
}
html{
	height:100%;
}
div {
	float:left;
	width: 600px;
    margin: auto;
    padding: 30px;
    border-radius: 10px;
    background-color: beige;
}
.page{

}
body {
    height: 100%;
    margin:auto;
    padding: 0;
    width : 0px;
    margin-top: 150px;
    background-color: blue;

}