Понимаю, что с моей стороны наглость просить, но помогите плиз (сам не разберусь).
У меня есть библиотека alib (к сожалению только с ней нужно работать)
Вот первый скрипт alib.common/script.js
автор
// alib common object
function Alib() {};

//------------------------------------
// retrieve target for event
//------------------------------------

Alib.prototype.getTarget = function(e) {
var target;
if (e.target) target = e.target;
else if (e.srcElement) target = e.srcElement;
if (target.nodeType == 3) // defeat Safari bug
target = target.parentNode;

return target;
}

//------------------------------------
// retrieve related target for event
//------------------------------------

Alib.prototype.getRelatedTarget = function(e) {
return (e.relatedTarget) ? e.relatedTarget : e.toElement;
}

Alib.prototype.addListener = function(obj, event, handler) {
if (obj.addEventListener) {
obj.addEventListener(event, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + event, handler);
} else {
window.status = 'Please upgrade to more recent browser like ie6.0 or firefox.';
}
}

/* warning, ie is choking on addStyleSheet */
Alib.prototype.addStyleSheet = function(title, href) {
/*
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link')
link.rel = 'stylesheet';
link.type = 'text/css';
link.title = '';
link.href = href;

head.appendChild(link);
*/
document.write('<link rel="stylesheet" href="'+href+'" type="text/css">');
}

var alib = new Alib();


Вот второй скрипт menu.horizontal/script.js

автор
//------------------------------------
// Created on 8.3.2006
// (c) Jan Ptacek
//------------------------------------

// alib Hmenu object
function Hmenu() {};

//------------------------------------
//
//------------------------------------

Hmenu.prototype.addBehavior = function() {
// get menu roots
var node;
var i = 0;
var k = 1;
while((node = document.getElementsByTagName('UL').item(i++))) {
if (node.className == 'hmenu') {
node.className = 'hmenuALIB';
for (var j = 0; j < node.childNodes.length;j++) {
if (node.childNodes[j].tagName == 'LI')
Hmenu.prototype.initMenuItem(node.childNodes[j], k++);
}
}
}
}

Hmenu.prototype.initMenuItem = function(li, num) {
// to emulate :first-child
if (num == 1) {
li.style.borderTopWidth = '1px';
li.style.borderLeftWidth = '1px';
}

for (var i = 0; i < li.childNodes.length;i++) {
if (li.childNodes .tagName == 'UL') {
var nodeUL = li.childNodes;
li.cachedUL = nodeUL;
// 1 + n-level submenu
if (li.parentNode.className != 'hmenuALIB') {
// background arrow
li.childNodes[0].className += ' hmenuALIBsuba'; // shrink anchor
li.className += ' hmenuALIBsubli'; // apply image
// li.style.backgroundRepeat = 'no-repeat';
// li.style.backgroundImage = 'url(/meshcms3/meshcms/admin/scripts/alib/menu.horizontal/sub.gif)';
// li.style.backgroundColor = 'white';
// li.style.backgroundPosition = '99%';
}
alib.addListener(li, 'mouseover', Hmenu.prototype.showSubmenu);
alib.addListener(li, 'mouseout', Hmenu.prototype.hideSubmenu);

var k = 1;
for (var j = 0; j < nodeUL.childNodes.length;j++) {
if (nodeUL.childNodes[j].tagName == 'LI')
this.initMenuItem(nodeUL.childNodes[j], k++);
}
}
}
}

Hmenu.prototype.showSubmenu = function(e) {
if (!e) var e = window.event;
var target = alib.getTarget(e);
if (target.tagName == 'A')
target = target.parentNode;
if (target.cachedUL) {
target.cachedUL.style.display = 'block';
}
}

Hmenu.prototype.hideSubmenu = function(e) {
if (!e) var e = window.event;
var target = alib.getTarget(e);
var related = alib.getRelatedTarget(e);
if (!related || related.tagName == 'HTML')
related = document.getElementsByTagName('body')[0];
Hmenu.prototype.report('out '+target.tagName+'->'+related.tagName);
Hmenu.prototype.report("\n");
// maybe mouse left only into successor, handle
if (target.tagName == 'A')
target = target.parentNode;
if (Hmenu.prototype.isAncestor(target, related))
return;
// it left into ancestor
// find ul upon related node or body
var commonUL = related;
while (commonUL.tagName != 'UL' && commonUL.tagName != 'BODY')
commonUL = commonUL.parentNode;
// iterate up the tree from target till commonUL and close submenu
Hmenu.prototype.report('coUL:'+commonUL.tagName+'::');
while (target != commonUL && target.tagName != 'BODY') {
Hmenu.prototype.report(target.tagName+'~');
if (target.cachedUL)
target.cachedUL.style.display = 'none';
target = target.parentNode;
}
Hmenu.prototype.report("\n");
}

Hmenu.prototype.isAncestor = function(ancestor, child) {
while (child != ancestor && child.nodeName != 'BODY')
child = child.parentNode;
return child == ancestor ? 1 : 0;
}

Hmenu.prototype.report = function () {};

/* INITS */

var hmenu = new Hmenu();

// register onload init
alib.addListener(window, 'load', hmenu.addBehavior);


Файл стилей menu.horizontal/style.css

автор
/*
* Created on 5.1.2005
* (c) Jan Ptacek
*
* Three kinds of <li> elements get styled here
* top-level - always visible
* 1-level - pulled down
* n-level - pulled left - n is from {2, ... }
*
*
* Additional style is attached in menu.horizontal/script.js
* to emulate :first-child
* to add background-image indicating submenu presence
*/

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.hmenuALIB { /* top-level menu */
position: relative; /* to let submenus be absolute positioned */
height: 1.4em;
z-index: 20;

display: block;
margin: 0px;
padding: 0px;
border: 0px;
list-style: none;
}

.hmenuALIB ul { /* 1-level menu */
position: absolute; /* ie: out of flow, so do not strech height of top-level menu */
top: 1.4em;
left: -1px; /* due to box model */
padding: 0px;
margin: 0px;
list-style: none;
display: none;
}

.hmenuALIB ul ul { /* n-level menu */
left: 150px;
top: -1px; /* */
}

.hmenuALIB li { /* top-level menu lineup */
position: relative; /* to position submenus */
float: left;
border: 1px solid black;
border-left: 0px solid black;
background-color: #cacaca;
}

.hmenuALIB ul li { /* 1 or n-level menu lineup */
clear: left; /* we do not want float left here */
/* but we want excesive space eater effect */
/* of float: left, co just move next block */
/* to next line with clear */
border: 1px solid black;
border-top: 0px solid black;
background-color: white;
}


.hmenuALIB li a { /* all-level menu anchors */
display: block; /* to fill full square */
/*float:left;*/ /* to lineup well */
border: 0px solid #ccc;
padding: 0px 9px 0px 9px;
text-decoration: none;
color: black;
vertical-align: bottom;
line-height: 1.4em;
}

.hmenuALIB .selected,.hmenuALIB li a:hover {
background-color: #cc0001;
background-image: inherit;
background-position: inherit;
background-repeat: inherit;
color: white;
}

.hmenuALIB ul li a { /* 1 or n-level menu anchors */
display: block; /* all same width */
width: 150px;
line-height: normal;
}

.hmenuALIBsuba {
width: 140px;
}

.hmenuALIBsubli {
background: #ffffff url(sub.gif) no-repeat 99%;
}



Ну и HTML код
автор
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="cs">
<title>Menu Horizontal - sample page</title>

<!-- NEEDED -->
<script src="alib.common/script.js" type="text/javascript"></script>
<script src="menu.horizontal/script.js" type="text/javascript"></script>
<link type="text/css" href="menu.horizontal/style.css" rel="stylesheet">
<!-- /NEEDED -->
</head>
<body>
<!-- NEEDED (class just hmenu) (multiple classes currently not supported)-->
<ul class="hmenu">
<li>
<a href="#">About us</a>
<ul>
<li><a href="#">Profil</a></li>
<li><a href="#">References</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Contact</a></li>
<li>
<a href="#">Ask</a>
<ul>
<li><a href="#">HQ</a></li>
<li><a href="#">Secretariat</a></li>
<li><a href="#">Hotline</a></li>
<li><a href="#">Jeeves</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Corporate</a>
<ul>
<li><a href="#">Problems</a></li>
<li><a href="#">Jokes</a></li>
<li><a href="#">Colors</a></li>
<li><a href="#">Uniforms</a></li>
</ul>

</li>
<li><a href="#">News</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- /NEEDED -->
<p>in ie, notice the bar:<br>
'IE has restricted this file from showing active content'<br>
it's there cos we rely on javascript<br>
and its there only when NOT opened through http protocol.<br>
serve it with your local apache, and it will work as expected.<br>
(switches your security zone from script unfriendly<br>
'My computer' to 'Internet')
<!--textarea id="report" style="position:absolute; top:10px; left:400px; width:600px; height: 800px;"></textarea-->
</body>
</html>


Вопрос: как сделать, чтобы меню выпадало не с верху в низ, а снизу вверх.
Или подскажите редактор-отладчик для этих целей.
Литературой я обзавелся и по javascript и по css (изучю и не буду никого дергать). Порсто сейчас нет времени. Помогите Плиззз!!!