Sous-menu
nono_vice
Messages postés
1
Statut
Membre
-
Ltfx Messages postés 2 Statut Membre -
Ltfx Messages postés 2 Statut Membre -
Bonjour tout le monde,
Je débute en programmation, j'ai lu le cour https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
pour essayer de créer mon premier site web. Le souci c'est que je n'arrive pas a créer un menu déroulant, les sous-menus ne s'affichent pas.
je vous prie d'être indulgent avec moi, je ne connais rien en programmation.
merci pour votre aide.
voici mon code html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>A court d'idées</title>
</head>
<body>
<header> <center>Vous êtes à court d'idées ? </center></header>
<div class="construct">
<p>
<marquee align="middle" scrollamount="8" scrolldelay="120" width="719" height="31">Pour le moment, mon site est en construction</marquee>
</p>
</div>
<ul id="menu">
<li class="active"><a href="accueil.html"> Accueil </a></li>
<li><a href="recettes.html"> Recettes </a>
<ul>
<li><a href="#"> blabla </a></li>
</ul>
</li>
<li><a href="ingredients.html"> Ingrédients </a></li>
<li><a href="Astuces.html"> Astuces des chefs </a></li>
<li><a href="videos.html"> Vidéos </a></li>
<li><a href="Nouvautes.html"> Nouvautés </a></li>
<li><a href="membres.html"> Espace membres </a></li>
<li><a href="contact.html"> Nous contacter</a></li>
</ul>
</body>
<footer >
</footer>
</html>
et mon code css
body
{
background-image: url(346466-admin.jpg);
background-attachment: fixed;
}
.construct
{
color: #ffdead;
font-size: 30px;
text-decoration: none
;
}
@font-face {
font-family: 'LearningCurveProRegular';
src: url('LearningCurve_OT-webfont.eot');
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
font-family: 'LearningCurveProRegular', Arial, serif;
}
header
{
border: 10px #E3C079 outset;
border-radius: 10px;
box-shadow: 6px 6px 0px #D1B170 ;
text-shadow: 4px 3px 4px black ;
text-decoration: none;
font-style: italic;
color: #ffcc80;
font-size: 48px;
}
header:hover
{
text-decoration: none ;
color: black;
}
a
{
color:black;
}
a:visited
{
color: #043F37;
}
#menu ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 100px;
text-align : center;
position:absolute;
max-height:0;
}
#menu
{
font-weight : bold;
font-family : Arial;
font-size : 16px;
}
#menu a
{
display : block;
padding : 0;
background : #000;
color : #ffdead;
text-decoration : none;
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
border-right : 1px solid #fff;
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu li ul /* Sous-listes */
{
position: absolute;
width: 144px;
left: -999em;
visibility:hidden;
}
#menu li ul li /* Éléments de sous-listes */
{
border-top : 1px solid #fff;
}
#menu li ul li
{
border-top : 1px solid transparent;
}
#menu li ul ul
{
margin : -22px 0 0 144px ;
border-left : 1px solid #fff ;
}
#menu li ul ul
{
border-left : 1px solid transparent ;
}
#menu a:hover
{
color: black;
background: #ffdead;
}
#menu li ul li a
{
background: transparent url("") repeat ;
}
#menu ul li ul
{
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu ul li{
display:inherit;
border-radius:0;
}
Je débute en programmation, j'ai lu le cour https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
pour essayer de créer mon premier site web. Le souci c'est que je n'arrive pas a créer un menu déroulant, les sous-menus ne s'affichent pas.
je vous prie d'être indulgent avec moi, je ne connais rien en programmation.
merci pour votre aide.
voici mon code html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>A court d'idées</title>
</head>
<body>
<header> <center>Vous êtes à court d'idées ? </center></header>
<div class="construct">
<p>
<marquee align="middle" scrollamount="8" scrolldelay="120" width="719" height="31">Pour le moment, mon site est en construction</marquee>
</p>
</div>
<ul id="menu">
<li class="active"><a href="accueil.html"> Accueil </a></li>
<li><a href="recettes.html"> Recettes </a>
<ul>
<li><a href="#"> blabla </a></li>
</ul>
</li>
<li><a href="ingredients.html"> Ingrédients </a></li>
<li><a href="Astuces.html"> Astuces des chefs </a></li>
<li><a href="videos.html"> Vidéos </a></li>
<li><a href="Nouvautes.html"> Nouvautés </a></li>
<li><a href="membres.html"> Espace membres </a></li>
<li><a href="contact.html"> Nous contacter</a></li>
</ul>
</body>
<footer >
</footer>
</html>
et mon code css
body
{
background-image: url(346466-admin.jpg);
background-attachment: fixed;
}
.construct
{
color: #ffdead;
font-size: 30px;
text-decoration: none
;
}
@font-face {
font-family: 'LearningCurveProRegular';
src: url('LearningCurve_OT-webfont.eot');
src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
url('LearningCurve_OT-webfont.woff') format('woff'),
url('LearningCurve_OT-webfont.ttf') format('truetype'),
url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
font-family: 'LearningCurveProRegular', Arial, serif;
}
header
{
border: 10px #E3C079 outset;
border-radius: 10px;
box-shadow: 6px 6px 0px #D1B170 ;
text-shadow: 4px 3px 4px black ;
text-decoration: none;
font-style: italic;
color: #ffcc80;
font-size: 48px;
}
header:hover
{
text-decoration: none ;
color: black;
}
a
{
color:black;
}
a:visited
{
color: #043F37;
}
#menu ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 100px;
text-align : center;
position:absolute;
max-height:0;
}
#menu
{
font-weight : bold;
font-family : Arial;
font-size : 16px;
}
#menu a
{
display : block;
padding : 0;
background : #000;
color : #ffdead;
text-decoration : none;
width : 144px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
border-right : 1px solid #fff;
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#menu li ul /* Sous-listes */
{
position: absolute;
width: 144px;
left: -999em;
visibility:hidden;
}
#menu li ul li /* Éléments de sous-listes */
{
border-top : 1px solid #fff;
}
#menu li ul li
{
border-top : 1px solid transparent;
}
#menu li ul ul
{
margin : -22px 0 0 144px ;
border-left : 1px solid #fff ;
}
#menu li ul ul
{
border-left : 1px solid transparent ;
}
#menu a:hover
{
color: black;
background: #ffdead;
}
#menu li ul li a
{
background: transparent url("") repeat ;
}
#menu ul li ul
{
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu ul li{
display:inherit;
border-radius:0;
}
A voir également:
- Sous-menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
1 réponse
juste un petit truc dans l'emplacement <header> ce trouve les meta tag la balise titre, les inclusions javascript, css ou autre, s'en servir comme container! par doute, avec l'évolution tu m'a fait douté ! j'ai vérifier sur le lien que tu as donnée à aucun moment il utilise <header> comme élément d'affichage !
#menu li ul attribut visibility:hidden;
Pour moi recommence, le code css est un peu confus mal organisé tu déclare 2 fois #menu li ul ul dans le code avec un premier border-top : 1px solid #fff; et le second avec border-top : 1px solid transparent;
et des #menu ul li ul et li ul li ul:hover etc...
bon courage ;)
#menu li ul attribut visibility:hidden;
Pour moi recommence, le code css est un peu confus mal organisé tu déclare 2 fois #menu li ul ul dans le code avec un premier border-top : 1px solid #fff; et le second avec border-top : 1px solid transparent;
et des #menu ul li ul et li ul li ul:hover etc...
bon courage ;)
