Code: |
<!DOCTYPE html>
<html> <head> <meta name="author" content="Mathieu H"> <meta charset="utf-8"> <html lang="fr"> <meta name="description" content="Tes mots pour le référencement"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css.css"> <title>Le nom de ton site/de la page</title> </head> <body> <nav class="menu-nav"> <ul> <li class="bouton"><a href="index.html">Accueil</a></li> <li class="bouton"><a href="news.html">Actualités</a></li> <li class="bouton"><a href="lang.html">Langue</a> <ul> <li class="sbtn"><a href="#">Syntaxe/Grammaire</a></li> <li class="sbtn"><a href="#">Phonétique</a></li> <li class="sbtn"><a href="#">Lexique</a></li> <li class="sbtn"><a href="#">Par niveau</a> <ul> <li class="ssbtn"><a href="#">A1</a></li> <li class="ssbtn"><a href="#">A2</a></li> <li class="ssbtn"><a href="#">B1</a></li> <li class="ssbtn"><a href="#">B2</a></li> <li class="ssbtn"><a href="#">C1</a></li> <li class="ssbtn"><a href="#">C2</a></li> </ul> </li> </ul> </li> <li class="bouton"><a href="culture.html">Culture</a></li> </ul> </nav> </body> </html> |
Code: |
html {
background-color: white; font-size: 20px; } nav > ul { padding: 0px; margin: 0px; list-style-type: none; } nav > ul::after { content: ""; display: block; clear: both; } nav > ul > li { float: left; position: relative; } nav li { list-style-type: none; } .sbtn { display: none; } nav li:hover .sbtn { display: inline block; position: absolute; top: 100%; left: 0px; padding: 0px; z-index: 1000; } nav { width: 100%; background-color: #424558; } nav a { display: inline-block; text-decoration: none; } nav > ul > li > a { padding: 20px 30px; color: #FFF; } .sbtn li { border-bottom: 2px solid black; } .sbtn li a { padding: 15px 30px; text-decoration-style: none; font-size: 13px; color: #222538; width: 270px; } |
Code: |
<!DOCTYPE html>
<html lang="fr"> <head> <meta name="author" content="Mathieu H"> <meta charset="utf-8"> <meta name="description" content="Tes mots pour le référencement"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css.css"> <title>Le nom de ton site/de la page</title> </head> <body> <nav class="menu-nav"> <ul> <li class="bouton"><a href="index.html">Accueil</a></li> <li class="bouton"><a href="news.html">Actualités</a></li> <li class="bouton"><a href="lang.html">Langue</a> <ul> <li class="sbtn"><a href="#">Syntaxe/Grammaire</a></li> <li class="sbtn"><a href="#">Phonétique</a></li> <li class="sbtn"><a href="#">Lexique</a></li> <li class="sbtn"><a href="#">Par niveau</a> <ul> <li class="ssbtn"><a href="#">A1</a></li> <li class="ssbtn"><a href="#">A2</a></li> <li class="ssbtn"><a href="#">B1</a></li> <li class="ssbtn"><a href="#">B2</a></li> <li class="ssbtn"><a href="#">C1</a></li> <li class="ssbtn"><a href="#">C2</a></li> </ul> </li> </ul> </li> <li class="bouton"><a href="culture.html">Culture</a></li> </ul> </nav> </body> </html> |
Code: |
html {
background-color: white; font-size: 20px; } body { margin: 0; } nav > ul { display: flex; flex-wrap: wrap; margin: 0; background-color: #424558; padding: 0; } nav > ul > li { list-style: none; display: inline-block; } nav > ul > li > a { padding: 20px 30px; color: #FFF; text-decoration: none; display: inline-block; } nav > ul::after { content: ""; display: block; clear: both; } .bouton > ul { display: none; position: absolute; background-color: #424558; } .bouton ul li { list-style: none; } .bouton ul li a { text-decoration: none; color: #fff; padding: 5px 12px; display: block; } .bouton:hover > ul { display: block; padding: 10px 15px; min-width: 200px; } .sbtn li { border-bottom: 2px solid black; } .sbtn li a { padding: 15px 30px; text-decoration: none; font-size: 13px; color: #222538; width: 270px; } |
Sujets similaires |
|||||
Sujet | Auteur | Forum | Réponses | Posté le | |
---|---|---|---|---|---|
Problème température | Fuzion | Watercooling | 45 | 14 mai 2024 à 18:18 | |
Problème i9-13900K POWER LIMIT | Toocool | Divers Hardware | 1 | 14 mai 2024 à 08:28 | |
Problème Asus USB AX-56 | nyccow | Divers Hardware | 1 | 10 mai 2024 à 14:30 | |
Problème d'installation SSD NVMe | Foucinetique | SSD | 3 | 07 mai 2024 à 20:48 | |
[Problème-Upgrade] Ordi ne démarre pas | Dwarfcherry | Le poulailler | 12 | 07 mai 2024 à 19:17 |