Problemas con menu desplegable CSS+HTML+Javascript

Tengo el siguiente codigo pero el menu se despliega pero no se cierra y no se que codigo me falta y llevo tiempo y he mirado varios post de esta web (y otras) pero no encuentro la solucion, espero que alguno de vosotros podais ayudarme

CSS

.global .headSubmenu {
float: right;
font-family: fantasy;
font-size: 13px;
font-weight: lighter;
letter-spacing: 1px;
margin-right: -17px;
padding-top: 10px;
}

.global .headSubmenu li {
float:left;
margin-right:10px;
}

.global .headSubmenu li a:link{ color:#FFF; text-decoration: none;}
.global .headSubmenu li a:visited {color:#FFF; text-decoration: none;}
.global .headSubmenu li a:hover{color:#FFF; text-decoration:underline;}
.global .headSubmenu li a:active{color:#FFF; text-decoration: none;}

.settingSubmenu
{
display: none;
position: absolute;
width: 120px;
background-color: #00839d;
color: #FFF;
overflow:hidden;
}

.settingSubmenu li
{
padding: 6px;
}

.settingSubmenu li a:link{ color:#FFF; text-decoration: none;}
.settingSubmenu li a:visited {color:#FFF; text-decoration: none;}
.settingSubmenu li a:hover{color:#FFF; text-decoration:underline;}
.settingSubmenu li a:active{color:#FFF; text-decoration: none;}

Javascript

// Settings Sub menu
function toggleSettings() {
$(".settingSubmenu").css(
{
position: "absolute",
top: $(".global").outerHeight(),
left: $("#settingBtn").offset().left,
'z-index': '50000'
}
);
$(".settingSubmenu").animate({ height: "toggle" }, 100);
}

HTML

<ul class="headSubmenu">
<li><a href="<?php echo _WWW_ROOT; ?>"><?php _ge('Home'); ?></a></li>
<li><a id="settingBtn" href="javascript:toggleSettings();"><?php _ge('Account'); ?></a></li>
</ul>
</div>
</header>
<ul class="settingSubmenu">
<li><a href="<?php echo _WWW_ROOT; ?>user_edit.php"><?php _ge('Edit profile'); ?></a></li>
<li><a href="<?php echo _WWW_ROOT; ?>user_edit_password.php"><?php _ge('Change password'); ?></a></li>
<li><a href="<?php echo _WWW_ROOT; ?>logout.php"><?php _ge('LogOut'); ?></a></li>
<li><a href="<?php echo _WWW_ROOT; ?>help.php"><?php _ge('Help'); ?></a></li>
</ul>

Hola amigos espero alguien pueda ayudarme con un problemita que me surgio con un proyecto en mi trabajo

tengo un menu dessplegable que usa javascipt o mas bien es generado automaticamente con java creo y tiene position absoluta el problema es que cuando la pagina esta completamente abierta funciona bien y se encuentra exactamente abajo de la navegacion osea titulos y cuando la pagina p la ventana del explorador es pequena el menu se sale de su posicion o mantiene su posicion y como digo este codigo del menu no tiene div's o cajas simplemente es generado por un archivo de java script el problema es que no tengo acceso al archivo javascript porque esta es de una tienda en linea y quiero arreglarlo usando solamente css
gracias por su ayuda