Maintenant, occupons-nous des sous rubriques. Dans le calque navDreamweaver, tapons Extensions, Tutoriaux et Liens. Idem avec Flash et Forum (pour Forum, taper Dreamweaver et Flash) comme ci-dessous :

Pour paramétrer les sous rubriques comme nous l'entendons, changeons nos balises <p> par les balises correspondant à des éléments de liste, <ul> et <li>, et en faire des liens fictifs. Pour cela, sélectionnons les trois sous rubriques et dans l'inspecteur de Propriétés, cliquons sur Liste simple. Faisons de chaque sous rubrique un lien comme vu précédemment. Si vous regardez votre code HTML, vous devez constater que toutes vos balises <p> ont bien été remplacées :

<div id="navFlash">
    <ul>
        <li><a href="javascipt:;">Extensions</a></li>
        <li><a href="javascipt:;">Tutoriaux</a></li>
        <li><a href="javascipt:;">Liens</a></li>
    </ul>
</div>

Il ne nous reste plus qu'à mettre en forme tout ça.
Plaçons nos calques. Dans la feuille de style, situons les calques à 127px dans la propriété left (depuis le bord gauche), situons les calques navDreamweaver, navFlash et navForum respectivement 0px, 18px et 36px dans la propriété Top (depuis le sommet), donnons une hauteur de 58px aux navDreamweaver et navFlash (40px pour navForum) et donnons-leur une largeur de 100px(120px pour navForum).

div#navForum {
position:absolute;
width:120px; /*largeur*/
height:40px; /*hauteur*/
z-index:4;
left: 127px;/*distance par rapport au bord gauche*/
top: 36px; /*distance par rapport au sommet de la page*/
visibility: hidden;
background-color: #CCCCCC;
layer-background-color: #CCCCCC;}

Indiquons des bordures pour chaque calque en ajoutant :

border: 1px solid #000000; /*épaisseur de 1px, bordure solide, couleur rouge*/

Sur nos balises <ul>, nous allons appliquer un margin à 0 et un padding à 2px (cela permet d'aérer le texte par rapport au border du bloc Menu). Ensuite, pour nous permettre d'avoir une liste de liens homogènes, utilisons la propriété display (propriété utilisée pour le SMIL).

#navMenu ul {
margin: 0 0 0 0;
padding:2px 2px 2px 2px;
display: block;
background-color: #cccccc;
color: #de1d1a;}

Appliquons la même chose à la balise <li> comme tel :

#navMenu li {
margin: 0 0 0 0;
display: block;
color: #de1d1a;}

L'attribut "block" transforme l'élément en "individualité", ainsi les sous-rubriques sont devenues des blocs compacts (la propriété list-style par défaut s'annule) qui ne se chevauchent pas. Pour tester la différence, remplacez l'attribut "block" par "inline", quand on passe la souris sur Extensions, on peut observer, avec la couleur, que le bloc est chevauché par celui d'en dessous.
Pour les liens, indiquons une largeur à 100% pour que le lien s'applique sur toute la longueur du bloc Menu (cette option ne fonctionne que sur Opera 7 et Mozilla), une couleur de lien et aucun surlignage.

#navMenu a {
width: 100%;
color: #000000;
text-decoration: none;}

Règlons les couleurs des liens survolés.

#navMenu li:hover, #navMenu a:hover, #navMenu a:focus, #navMenu h4:hover{
background-color: #de1d1a;
color: #ffffff;}

Et voilà, un p'tit menu simple et léger...

Petit plus...

Point important à connaître : Nous avons externalisé le code CSS de notre page. Nous pourrions faire de même avec le code javascript grâce à une extension de Project Seven, Productivity Tools. Celle-ci permet, de la même façon que Layer to Style, de sortir le js de la balise body pour le mettre dans le head et, sans passer par Dreamweaver, de générer un fichier .js et tout ça, sans avoir à toucher à une ligne de code... Une idée de tutorial, certainement ;-)