Résolution pour l iPhone

Au passage remplacez vous deux meta viewport du HEAD par:

<meta name="viewport" content="initial-scale=1.0">

Mais je dois faire toutes les étapes ?

Mais ce qui est bizarre c'est qu'ils parlent quand meme du hover....

Le hover est transformé en clic (tap) et est géré en jquery.

Et oui il vous faudra refaire votre menu, sinon pas de sous-menus.

D'accord mais si je le fais en une colonne, comme c'est mis ici:
http://www.alsacreations.com/tuto/lire/1267-un-menu-deroulant-adapte-au-web-mobile.html

Comment il va s'afficher sur ma page ? Genre n'importe où sur la page ou il sera mis en dessous de la bannière ? Ou bien il va être sur une autre page ?

Non, il ne se placera pas n'importe où!
Ça n'existe pas dans ce domaine.

Le menu se placera selon :
- sa position dans le code Html
- les propriétés que vous lui donnerez via le Css

Dans le cas présent il se placera sous votre bannière.

Si je le met vertical il me décale tout et sa me fait de la catastrophe ... Comment j peux faire ??

alors il faut revenir vers le 1er lien que j'ai donné.