Sujet Précédent Sujet Suivant

Sous-menu

Fermé
nono_vice Messages postés 1 Date d'inscription vendredi 13 juin 2014 Statut Membre Dernière intervention 13 juin 2014 - 13 juin 2014 à 10:44
Ltfx Messages postés 2 Date d'inscription mercredi 11 juin 2014 Statut Membre Dernière intervention 13 juin 2014 - 13 juin 2014 à 23:26
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;

}
A voir également:

1 réponse

Réponse 1 / 1
Ltfx Messages postés 2 Date d'inscription mercredi 11 juin 2014 Statut Membre Dernière intervention 13 juin 2014
Modifié par Ltfx le 14/06/2014 à 00:06
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 ;)
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses