Etape n°4

On ajoute un peu d'animation avec a:hover, donc quand le pointeur passe au dessus du menu.

  /*on change la couleur de fond et de texte*/
  /*plus foncé à droite et à gauche*/
  /*on modifie les bordures et espacements
  pour que l'ensemble ne bouge pas*/
#menugauche li a:hover{
background-color:#A9CFFE;
color:#FFF;
border-left:8px solid #6600CC;
border-right:8px solid #5200A4;
border-bottom:3px solid #E9F5FE;
border-top:4px solid #E9F5FE;
padding-bottom:1px;
padding-top:1px;
padding-right:0;
width:135px;
}

A partir d'ici, les navigateurs anciens font n'importe quoi :

  /*deux colonnes*/
  /*float génère l'incompatibilité*/
  /*espacement entre les deux colonnes*/
  /*44%+.8+.8 pour la largeur réelle*/
.demi{
border:1px solid #FAAAFF;/*pb Netscape*/
float:left;
display:inline;/*ie fix*/
margin-left:.8em;
margin-right:.8em;
width:44%;
background-color:#E7F3FE;
/**/
text-align:left;
text-indent:.5em;
}
  /*on ajoute un écart entre texte et bordure*/
.demi div.n{
padding:10px;/*equivaut à padding:10px 10px 10px 10px;*/
line-height:1.2em;
}
.demi{
line-height:1.5em;/*bug Opera ie*/
}
.table_container {
width: 100%; /*99% nn6*/
border-right:1px solid #FAAAFF;
border-bottom:1px solid #FAAAFF;
overflow:hidden;/*force le conteneur à encadrer le contenu*/
}
.ligne_container {
width: 100%;
border-top:1px solid #FAAAFF;
overflow:hidden;
display:table; /* nn6 Opera 6*/
}
  /*trois colonnes*/
.donnee_container{
width:32%;
}
  /*deux colonnes ici colonne large*/
.donnee_container2{
width:66%;
}
  /*bordures*/
  /*cacher le texte s'il déborde*/
  /*pas de passage à la ligne*/
.donnee_container,.donnee_container2{
float:left;
border-left:1px solid #FAAAFF;
white-space: nowrap;
overflow:hidden;
display:table-cell; /* nn6 Opera 6*/
}
.ligne_container p {margin:0 0 0 5px;}

Après utilisation de float, clear est nécessaire pour marquer la fin de la division et entourer le contenu.

.clear{
clear:both;
padding-bottom:1px;/*Netscape 6 & 7*/
}

Le menu peut aussi utiliser <dl>, <dt> et <dd> si besoin au lieu de <ul> et <li>.

Passons à la dernière étape.