Menu

Menu déroulant HTML CSS [Résolu]

Messages postés
18
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
8 février 2019
-
Bonjour,

J'ai un projet "création d'un site web" en classe de Seconde, et j'ai insérer un menu déroulant.
je souhaiterais donner un lien à chaque mot contenu dans une liste déroulante. Des que le mot est selectionné on va sur la page. Pouvez-vous m'aider pour que je puisse aller sur une page après avoir cliqué dans le menu déroulant. Quels sont les codes ? Merci pour votre aide et vos réponses !
Voici mes codes HTML et CSS :

HTML :

[code]
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Site web HTML CSS</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<nav>
<ul>
<li class="menu-html"><a href="html.html">Acceuil</a>
<ul class="submenu">
<li><a href="#">Téléphones</a></li>
</ul>
</li>
<li class="menu-css"><a href="css.html">A propos</a>
<ul class="submenu">
<li><a href="#">Quel est le premier téléphone portable qui a existé ?</a></li>
<li><a href="#">Quel est le premier téléphone portable qui a existé ?</a></li>
<li><a href="#">Evolution du téléphone jusqu'à aujourd'hui</a></li>
</ul>
</li>
<li class="menu-javascript"><a href="javascript.html">Contact</a>
<ul class="submenu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</nav>
</body>
</html>
[code]

CSS :

[code]
body {

font-family: 'Source code pro', Calibri, serif;

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 > ul > li:hover a {
padding: 15px 30px 20px 30px;
}

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;
}

.menu-html:hover {
border-top: 5px solid #e44d26;
background-color: RGBA(228,77,38,0.15);
}

.menu-css:hover {
border-top: 5px solid #0070bb;
background-color: RGBA(000,112,192,0.15);
}

.menu-javascript:hover {
border-top: 5px solid #f1dc4f;
background-color: RGBA(241,211,79,0.15);
}

.menu-contact:hover {
border-top: 5px solid #BBB;
background-color: RGBA(220,220,220,0.15);
}

.menu-html .submenu {
background-color: RGB(230,100,40);
}

.menu-css .submenu {
background-color: RGB(000,160,240);
}

.menu-javascript .submenu {
background-color: RGB(250,215,100);
}

.submenu li:hover a {
color: #EEE;
font-weight: bold;
}

.menu-html .submenu li:hover {
background-color: RGB(210,77,60);
}

.menu-css .submenu li:hover {
background-color: RGB(000,115,200);
}

.menu-javascript .submenu li:hover {
background-color: RGB(200,165,75);
}
[code]
Afficher la suite 

Votre réponse

1 réponse

Messages postés
24534
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 février 2019
1840
0
Merci
Bonjour,
https://www.w3schools.com/tags/att_a_href.asp

NB: A l'avenir, merci d'utiliser les BALISES DE CODE pour poster ton code sur le forum.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
jordane45
Messages postés
24534
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 février 2019
1840 -
Qu'as tu essayé au juste ??
Quelles sont les noms des pages de ton site ? Quelles sont leurs url ?
Bref....des details... sinon on ne pourra pas t aider
MaxBMX17
Messages postés
18
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
8 février 2019
-
https://www.pierre-giraud.com

Je veux faire ceci (menu déroulant qui mène à une autre page du site)
Dois-je créé une page, puis prendre l'URL ?
<li><a href="URL">Qui est l'inventeur du premier téléphone ?</a></li>
MaxBMX17
Messages postés
18
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
8 février 2019
-
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604646-creer-des-liens

<li><a href="page2.html">Qui est l'inventeur du premier téléphone ?</a></li>


Il faut créer un fichier correspondant à une page HTML.
jordane45
Messages postés
24534
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 février 2019
1840 > MaxBMX17
Messages postés
18
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
8 février 2019
-
ben oui...
As tu bien créé un fichier "page2.html" ? se trouve t'il dans le même répertoire que celui qui contient ton menu ?
Car c'est bien ça qu'il faut faire...
MaxBMX17
Messages postés
18
Date d'inscription
vendredi 23 novembre 2018
Dernière intervention
8 février 2019
-
Oui, cela fonctionne
Merci.
Commenter la réponse de jordane45