5568 sujets

Sémantique web et HTML

Menu déroulant HTML CSS

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 :


<!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>


CSS :


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

Modifié par Raphael (23 Nov 2018 - 20:49)
Hello,

Je comprends pas vraiment le problème ici.
Pour naviguer à une autre page, il faut ajouter le lien dans l'attribut "href" des balises <a> et créer ces pages bien évidemment.
Sujet clos
Aller à