Problemas de seguimiento de menú desplazable

Estoy pasando un mal rato tratando de entender y luego implementar un método de desplazamiento de trabajo.

Objetivo: Crea un visor / galería de imágenes grandes. Los usuarios hacen clic en las teclas de flecha o en las miniaturas en un menú activado para navegar por las imágenes. La galería y el menú deben realizar un seguimiento de la miniatura que están viendo los usuarios.

Situación: Tengo una posición: #menu absoluto que se desliza para hacerse visible cuando el mouse se desplaza sobre el borde derecho de la ventana. Este #menu tiene un #galleryMenu hijo cuyo desbordamiento: desplazamiento. El resultado es un menú desplazable que se navega utilizando la rueda de desplazamiento.

Problema: Cada vez que el mouse sale del #menú, pierdes tu lugar. No sé cómo hacer que el #menú permanezca donde lo dejó el usuario.

Ejemplo de enlace al sitio web: http://bahaha.ga/?view=0

También probé algunos complementos, pero cancelan el desbordamiento de # galleryMenu: desplácese y arruina el #menu general.

Cualquier ayuda sería apreciada.

A continuación se muestra un código más simple / limpio para ayudar a comunicar mi objetivo / problema.

HTML

<div id="resolution">
    <div id="main">
        <img />
    </div>
    <div id="menu">
        <div id="galleryMenu">
            <ul id="galleryThumbnail">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
             </ul>
         </div>
     </div>
</div>

CSS

#resolution{
    position: absolute;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
}

#main{
    position: absolute;
    width: 100%;
    height: 100%;
}

#menu{
    position: absolute;
    display: block;
    cursor: pointer;
    right: 0;
    width: 10px;
}

#galleryMenu{
    position: absolute;
    display: none;
    width: 350px;
    right: 0;
    overflow: scroll;
}

#galleryThumbnail{
    list-style-type: none;
    padding: 20px 0 20px 0;
    margin: 0;
}
#galleryThumbnail li{
    padding: 0;
    margin: 0;
}

JQUERY

//Show and Hide Gallery Menu
$("#menu").hover(function(){
    $("#galleryMenu").show('slide', {direction: 'right'}, 500);} , function(){
    $("#galleryMenu").hide('slide', {direction: 'right'}, 500);}
);

//Set Window Height as Menu Heights
$("#menu").height($(window).height());
$("#galleryMenu").height($(window).height());

// Scroll to Current Thumbnail on Menu
$("#galleryMenu").animate({ 
    scrollTop: $(document).height()-$(window).height()}, 
    1400,
    "easeOutQuint"
);