Voici mon petit souci, je dois créer un menu déroulant en html css, voici le code html et css ..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon menu</title>
<link rel="stylesheet" href="media.css">
</head>
<body>
<nav class="menu">
<ul>
<li class="ht1"><a href="#">HTML</a>
<ul>
<li class="sous11"><a href="#">Cours complet HTML</a></li>
<li class="sous12"><a href="#">Référence des balises HTML</a></li>
<li class="sous13"><a href="#">Exemple et Exerice</a></li>
</ul>
</li>
<li class="cs1"><a href="#">CSS</a>
<ul>
<li class="sous21"><a href="#">Cours complet HTML et CSS</a></li>
<li class="sous22"><a href="#">Référence des propriétés CSS</a></li>
<li class="sous23"><a href="#">Référence de CSS</a></li>
<li class="sous24"><a href="#">Exemple et exercice</a></li>
</ul>
</li>
<li class="jav"><a href="#">Javascript</a>
<ul>
<li class="sous31"><a href="#">Cours complet Javascript</a></li>
<li class="sous32"><a href="#">Référence des fonctions Javascript</a></li>
<li class="sous33"><a href="#">Tout sur l'utilisation du DOM</a></li>
<li class="sous34"><a href="#">Exemple et Exercice</a></li>
</ul>
</li>
<li class="bienvenue"><a href="#">Bienvenue</a></li>
</ul>
</nav>
</body>
</html>
Et le CSS
nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
nav li {
float: left;
margin: auto;
padding: 0px;
background-color: black;
}
nav li a {
width: 120px;
text-decoration: none;
display: block;
color: red;
padding: 10px;
margin: 0px;
}
nav ul li ul {
display: none;
}
nav li:hover ul li {
float: none;
}
nav ul li:hover ul {
display: block;
}
nav li ul {
position: absolute;
}
nav ul li ul a {
color: green;
}
nav ul li ul a:hover {
color: #8a0;
}
nav a:hover {
color: #FFF;
}
.bienvenue {
float: right;
}
Alors le code fonctionne, seulement j'aimerais que le tout le background du menu soit en noir et pas seulement les puces principales du menu HTML CSS JAVASCRIPT ET BIENVENUE, il y a une discontinuité dans la couleur du background.. alors j'ai bien compris que ca venait du nav li {float: left; } qui entrait en conflit avec le reste, vu qu'il sort du flux, et que le bienvenue est aussi en float right,.. Alors j'ai essayé de le virer.. de le remplacer par un inline block.. mais dans ce cas ceux sont les sous menus qui se mettent à l'horizontal au lieu de la vertical..
Alors j'aimerais comprendre comment je peux faire et où est ce que je manque le train là..
Merci beaucoup et désolé si je n'étais pas très clair
j'ai essayé mais ca entre en conflit avec autre chose du coup tout le background n'apparait pas et me laisse le menu en fond blanc.. j'ai tenté de remplacer le float left par un inline block mais les sous listes se mettent à l'horizontal et non plus à la verticale..
ah mince mon edit ne s'est pas affiché ! Si cela fonctionne bien merci beaucoup, apparemment oui mon menu avait une hauteur par défaut à 0, du coup avec le height à 40px cela fonctionne ! Merci beaucoup gadhena!
Si cela ne te dérange pas j'ai une autre question.. voici mon nouveau code avec update ... les couleurs sont très moche mais ceci n'est pas la question ahah alors le voici..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mon menu</title>
<link rel="stylesheet" href="media.css">
</head>
<body>
<div class="div1">
<label for="case" class="case">Cocher pour afficher le menu</label>
<input type="checkbox" id="case" role="button">
<nav class="menu">
<ul>
<li class="ht1"><a href="#">HTML</a>
<ul>
<li class="sous11"><a href="#">Cours complet HTML</a></li>
<li class="sous12"><a href="#">Référence des balises HTML</a></li>
<li class="sous13"><a href="#">Exemple et Exerice</a></li>
</ul>
</li>
<li class="cs1"><a href="#">CSS</a>
<ul>
<li class="sous21"><a href="#">Cours complet HTML et CSS</a></li>
<li class="sous22"><a href="#">Référence des propriétés CSS</a></li>
<li class="sous23"><a href="#">Référence de CSS</a></li>
<li class="sous24"><a href="#">Exemple et exercice</a></li>
</ul>
</li>
<li class="jav"><a href="#">Javascript</a>
<ul>
<li class="sous31"><a href="#">Cours complet Javascript</a></li>
<li class="sous32"><a href="#">Référence des fonctions Javascript</a></li>
<li class="sous33"><a href="#">Tout sur l'utilisation du DOM</a></li>
<li class="sous34"><a href="#">Exemple et Exercice</a></li>
</ul>
</li>
<li class="bienvenue"><a href="#">Bienvenue</a></li>
</ul>
</nav>
</div>
</body>
</html>
et Le CSS
nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
nav li {
float: left;
margin: auto;
padding: 0px;
border-right: 1px solid yellow;
}
nav li a {
width: 200px;
text-decoration: none;
display: block;
color: red;
padding: 10px;
margin: 0px;
text-align: center;
}
nav ul li ul {
display: none;
background-color: #8a0;
border-radius: 0px 0px 12px 12px;
border: 1px solid black;
border-right: none;
}
nav li:hover ul li {
float: none;
}
nav ul li:hover ul {
display: block;
}
nav li ul {
position: absolute;
}
nav ul li ul a {
color: #FF33DA;
border-bottom: 1px solid white;
}
nav ul li ul a:hover {
color: black;
}
nav a:hover {
color: #FFF;
}
.bienvenue {
float: right;
border-right: none;
}
.menu {
height: 40px;
background-color: #467592;
border: 1px solid black;
border-radius: 6px 6px 0px 0px;
}
.ht1:hover {
box-shadow: 0px 6px 0px red inset;
}
.cs1:hover {
box-shadow: 0px 6px 0px blue inset;
}
.jav:hover {
box-shadow: 0px 6px 0px brown inset;
}
.menu:hover {
box-shadow: 0px 6px 0px green inset;
}
@media all and (min-width: 650px) {
#case {
display: none;
}
.case {
display: none;
}
}
@media all and (max-width: 650px) {
.menu {
display: none;
}
}
#case input[type=checkbox]:checked ~ ul {
display: block;
}
Alors je dois faire un TP, et je dois faire en sorte que lorsque je clique sur la check box, en responsiv design, le menu s'affiche lorsque la checkbox est cochée, et qu'il n'apparaissent pas lorsqu'elle n'est pas cochée.. pour le moment le menu disparait en reponsive mais n'apparait pas lorsque je coche la case..
Le soucis est donc dans la dernière commande css mais je ne comprends pas bien comment elle fonctionne.. avec le checked ~
Merci beaucoup si je ne suis pas clair n'hésitez pas à me le dire..
Oui je vois, je ne connais pas trop ce type de css :/ Moi personnellement je l'aurais pas en javascript mais je ne sais pas si c'est la meilleure méthode, et je sais pas si t'as le droit de le faire de cette manière pour ton TP :/
En fait, le problème c'est que là, ta ligne cible un input qui se trouverait dans un élément avec l'id "case" ; ici, c'est l'élément lui-même. Ensuite, tu essaies de cibler un ul qui serait adjacent à la checkbox, mais ce n'est pas le cas non plus.
Donc :
#case:checked ~ .menu {}
- Edité par EmmanuelBeziat 28 avril 2017 à 23:56:03
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
HTML CSS. Problème menu déroulant.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !