1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| * {
margin:0;
padding:0;
border:0; }
html, body {
font-family:Arial,sans-serif;
fonts-size:100%; }
#navMain a {
display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
padding:10px;
font-family:Arial, sans-serif;
color: #fff;
background: #2980b9;
text-decoration: none; /* ne pas souligner les liens */
}
#navMain a:hover {
background: #20638f; /*change la couleur de fond*/
}
/* ------------------------------- */
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 100% */
@media screen and (min-width: 641px)
{
#navMain > ul {/* slt niveau 1 */
display:table; /* se comporte comme une table */
width:100%; /* largeur du menu */
}
#navMain > ul > li {
display:table-cell; /* se comporte comme une cellule de table */
width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
} |