Menu déroulant en JS / CSS

Salutations,

n'étant pas bon du tout en JS (je n'y comprends rien du tout), un contact m'a pondu le code d'un menu déroulant vertical basé sur un moteur JS et JQUERY.

Je lui avait demandé de faire en sorte que le premier sous-menu soit par défaut décollapsé. Mais je me rends compte que si la fenêtre est redimensionné en hauteur, cela créé un ascenseur immonde par dessus le menu.

Je ne veux pas trop l'enquiquiner plus avec mes pbs, surtout qu'il voudrait que je fasse en fait un menu horizontal. Je neveux pas car tout le monde le fait, et je n'aime pas les sites tout en vertical...

Le menu actuel est visible ici

Voici un bout de code du menu pour vous aider à comprendre :

(...)
	<nav id="navMain">
		<ul>
			<li>
				<a href="index.php" title="Association WDA">Accueil</a>
			</li>
			<li class="active"> <!-- Sous-Menu ouvert par defaut - Voir menu.js !-->
				<a href="#">Association</a>
				<ul>
					<li>
						<a href="index.php?page=descri" title="Qui sommes-nous ?">Qui sommes-nous ?</a>
					</li>
(...)

Un bout du CSS correspondant :

(...)
/* ------------------------------- */
/* MENU */
#navMain {
	max-width: 150px;
	position: relative;
	width: 100%;
	margin: 0 auto;
	font-family: Verdana, Arial;
}

#navMain ul, #navMain li, #navMain a {
	position: relative;
	padding: 0;
	margin: 0;
	border: 0;
	text-decoration: none;
}

#navMain ul li {
	display: block;
}

#navMain ul li a {
	display: block;
	color: #FFFFFF;
	padding: 10px 10px;
	position: relative;
	text-shadow: 2px 1px 1px #000000; /* Ombrage */
	/* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); */ /* Ombrage initial */
}
(...)

Et surtout le fichier JS lié au menu :

// ------------------------------------------------
// 	jquery.dropdown.js	(depends on: jquery.hoverIntent.js)
// ------------------------------------------------
$.fn.dropdown = function(options) {
  var defaults = {};
  var opts = $.extend(defaults, options);
  // Apply class=hasSub on those items with children
  this.each(function() {
    $(this)
      .find("li")
      .each(function() {
        if ($(this).find("ul").length > 0) {
          $(this).addClass("hasSub");
        }
      });
  });
  return this;
};
// ------------------------------------------------
// ------------------------------------------------
// MENU MAIN
$(function() {
  var navMainId = "#navMain";
  // -------------------
  // Calling the jquery dropdown
  $(navMainId).dropdown();
  // -------------------
  //Sous-Menu ouvert par defaut
  $(navMainId + " ul > li.active").addClass("open");
  $(navMainId + " ul > li.active > ul").slideDown("fast");
  // -------------------
  // ouverture/fermeture sous-menu (click/touch)
  $(navMainId + " ul > li").on("click", function(event) {
    event.stopPropagation(); /* important */
    $(this)
      .parent()
      .find("li:not(:hover)")
      .removeClass("open");
    $(this).toggleClass("open");
    $(this)
      .parent()
      .find("li:not(:hover) ul")
      .slideUp("fast");
    if ($(this).hasClass("hasSub")) {
      $(this)
        .children("ul")
        .slideToggle("fast");
    }
  });
  // -------------------
  // on desactive les liens des Menus AVEC Sous-Menus
  // (obligatoire pour Tablettes TACTILES / Smartphones)
  $(navMainId + " > ul > li.hasSub > a").on("click", function(event) {
    event.preventDefault();
  });
  // -------------------
});
// ------------------------------------------------
// ------------------------------------------------
// Scrollbar si menu plus grand que la hauteur de fenêtre (interessant pour MENU FIXE)
$(window).on("load resize", function() {
  var navFixed = "#menu"; // menu FIXE
  $(navFixed).css({"max-height":$(window).height()+"px"}).css({ "overflow-y": "auto" });
});
// ------------------------------------------------

Pouvez-vous m'aider ?
Je crois avoir compris en lisant ce code JS que l'ascenseur s'affiche obligatoirement si la fenetre est trop petite en hauteur, mais du coup c'est moche... N'existe t'il pas une autre solution ?
Déjà, si je pouvais faire en sorte que le sous-menu decollapsé par défaut puisse être collapsé si la fenêtre est trop petite en hauteur, cela me ferait gagner de la place... (class="active" il me semble).

Merci de vos aides...

en faite, soit le scrollbar est en "auto" et du coup visible soit il est en "hidden" et du coup invisible (et impossibilité de scroller)...

A la limite la solution un peu batarde serais de faire un padding-right sur ton #menu pour dégager visuellement le scollbar.

Un peu comme pour le passer en responsive ?

Bah c'est justement l'évolution prévue, mais j'en suis encore moins capable.

En gros dans ton css

#menu {
	/* width: 150px; */ /* Largeur du container global de gauche */ 
	padding: 0px 8000px 0px 0px;

j'ai virer le width, et j'ai rajouter un padding right.. en attendant de trouver une solution plus correct.

Merci, mais en effet, cela à le même effet visiblement, à part que l'ascenseur ne s'affiche pas, mais le menu est déformé.

Si je pouvais passer ce menu en responsive, cela pourrait résoudre le pb, non ?
Ou collapser comme je le disais initialement le menu si la hauteur est trop petite...