Ci-dessous, il y a un modèle d'un menu qui peut être insérer dans un autre document. Voici la page principale :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr-CA">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menu</title>
<link rel="stylesheet" href="./Menu.css" type="text/css" media="projection, screen, tv, print">
</head>
<body>
<h1>Menu</h1>
<ul>
<li><a href="#">Élément de menu 1</a>
<ul>
<li><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a></li>
</ul>
</li>
<li><a href="#">Élément de menu 2</a></li>
<li><a href="#">Élément de menu 3</a>
<ul>
<li><a href="#">Sous menu 1</a></li>
<li><a href="#">Sous menu 2</a></li>
<li><a href="#">Sous menu 3</a>
<ul>
<li><a href="#">Sous-sous menu 1</a></li>
<li><a href="#">Sous-sous menu 2</a></li>
<li><a href="#">Sous-sous menu 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Élément de menu 4</a></li>
</ul>
</body>
</html>
Voici la page des styles (./Menu.css) :
html {
overflow: auto; /* Enlève la barre de défilement si on ne l'as pas de besoin dans IE */
}
/* Texte et arrière plan */
body {
background-color: #660000;
color: #FFFFFF;
margin: 10px;overflow: hidden;
}
/* En-tête */
h1 {
color: #FF0000;
text-align: center;
}
/* Listes sans "points" */
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
/* Liens du menu */
ul a[href] {
color: #FFFFFF;
display: block;
margin-bottom: 2px;
padding: 1px 3px;
text-decoration: none;
}
/* Survoler sur un élément de menu */
ul a[href]:hover {
background-color: #FFCCCC;
color: #000000;
}
/* Pleine largeur du menu */
ul li {
width: 100%;
}
/* "Sous menus" - Permet un arbre sans limite de profondeur...en exception de la largeur de la page */
ul ul {
margin-left: 15px;
}
/* Liens des sous menus */
ul ul li a[href] {
border-left: 3px solid #FF0000;
padding-left: 8px;
}