5542 sujets

Sémantique web et HTML

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.