Ну а что вам не нравится-то?
Навели мышь на пункт -- отработал hover, показали меню.
Вывели мышь из пункта -- пропал hover, спрятали меню.

Чтобы демонстрировать меню должным образом, вам нужна гораздо более комплексная логика:
1) Навели мышь на пункт -- показали меню;
1*) Навели мышь на другой пункт -- показали другое меню;
2) Пока ведем мышь от пункта до меню -- никаких скрытий не отрабатывает. Это можно сделать, например, заведя <div> пункта меню вплотную и частично "под" подменю;
3) Если вышли мышой из пункта меню, но при этом зашли в подменю -- то ничего не скрывается.
4) И только если вышли мышой из пункта меню, _и_ в подменю мыши тоже нет -- вот тогда скрываем.

Ну я об этом же и пишу. У вас на странице код-то работает по hover на <a>, а не на <li>. А между <a> и подменю дыра -- как только мышь заходит в дыру, так подменю и прячется.