Menu déroulant et lecteur vidéo FLV

Explications

• Bordures et arrières plans des éléments servent à les visualiser et les positionner (bordure,  margin et padding prennent de la largeur dont il faut tenir compte).
• Les li de premier niveau flottent à gauche et ont une position relative pour servir de référence au positionnement des éléments de 2ème niveau
• Lorsque les li de premier niveau ne sont pas survolés, les listes de 2ème niveau ne s'affichent pas
• Annuler le flottement des li de 2ème niveau
• Lorsque un li de premier niveau est survolé, il prend : 
  • une position absolute permettant de le positionner par des décalages
  • un affichage de type block
  • les liens de la liste de 2ème niveau prennent aussi un affichage de type block 
  • et une position absolute permettant de modifier au besoin leur position
    

Il faudra donc styler successivement :

1. #menuHD
2. #menuHD li
3. #menuHD li ul
4. #menuHD li ul li
5. #menuHD li:hover ul
6. #menuHD li:hover ul li
7. #menuHD li:hover ul li a
8. #menuHD li:hover ul li a:hover

• Le point de référence pour les positions absolute est le coin haut gauche du conteneur parent placé en position relative.
• Pour que le menu fonctionne il ne doit pas y avoir d'espace entre les li de premier niveau et le menu de 2ème niveau : hauteur25 px  + padding-top2px + (bordures 1px  x 2) = 29 px
• L'avantage avec l'interface graphique c'est qu'il est facile de trouver les positions exactes sans trop de calculs.
• Décoration : pour le menu de premier niveau la bordure est appliquée à li alors que pour le menu de 2ème niveau toutes les décorations sont appliquées au lien a et a:hover.