<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu simple</title> <link rel="stylesheet" type="text/css" href="styles/menu.css" /> <!--<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' />--> </head> <body> <nav> <ul> <li><a href="#">page1</a></li> <li><a href="#">page2</a></li> <li><a href="#">page3</a></li> <li><a href="#">page4</a></li> </ul> </nav> </body> </html>
Remarque : le lien en commentaire montre comment utiliser une police de caractères Google.
body { font-family: "Lato", sans-serif; font-size: 12px; }
Créer la règle 1 comme ci-dessous :
/* Règle 1 */ nav ul { list-style: none; }
Créer la règle 2 comme ci-dessous :
/* Règle 2 */ nav ul li a { text-decoration: none; }
Compléter la règle 1 avec les déclarations ci-dessous :
/* Règle 1 */ nav ul { padding: 0; margin: 0; }
Créer la règle 3 comme ci-dessous :
/* Règle 3 */ nav ul li { float: left; }
Compléter la règle 3 avec les déclarations ci-dessous :
/* Règle 3 */ nav ul li { background-color: #64abfb; float: left; line-height: 35px; }
Compléter la règle 2 avec la déclaration de style ci-dessous :
/* Règle 2 */ nav ul li a { margin-left: 20px; margin-left: 20px; }