Menu Desplegable hacia abajo con js

[60NZ4]

buenas amigos, la verdad se 0 de javascript, pero indagando en el tema, he pillado un código muy bueno para un menú desplegable,el efecto que quiero conseguir es muy similar al que hay en el meno de inicio en esta pagina por ejemplo, bueno el caso es que el código que me he descargado, me pone el menú hacia la derecha,yo quiero que se despliegue hacia abajo, aqui os dejo el codigo, porfavor decirme donde debo retocar para desplegar hacia abajo, no tengo tiempo ahora para aprender javascript jeje, aunque lo tengo en mis futuros plantes =)

Aqui el codigo, tal cual

Código Javascript:

/************************************************************************************************************
    (C) www.dhtmlgoodies.com, November 2005
    
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.   
    
    Terms of use:
    You are free to use this script as long as the copyright message is kept intact. However, you may not
    redistribute, sell or repost it without our permission.
    
    Thank you!
    
    www.dhtmlgoodies.com
    Alf Magne Kalleland
    
    ************************************************************************************************************/
 
    var timeBeforeAutoHide = 700;   // Microseconds to wait before auto hiding menu(1000 = 1 second)
    var slideSpeed_out = 10;    // Steps to move sub menu at a time ( higher = faster)
    var slideSpeed_in = 10;
        
    
    var slideTimeout_out = 25;  // Microseconds between slide steps ( lower = faster)
    var slideTimeout_in = 10;   // Microseconds between slide steps ( lower = faster)
    
    var showSubOnMouseOver = true;  // false = show sub menu on click, true = show sub menu on mouse over
    var fixedSubMenuWidth = false;  // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
    
    var xOffsetSubMenu = 0;     // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
    
    var slideDirection = 'right';   // Slide to left or right ?
    
    /* Don't change anything below here */
    
    var activeSubMenuId = false;
    var activeMainMenuItem = false;
    var currentZIndex = 1000;       
    var autoHideTimer = 0;
    var submenuObjArray = new Array();
    var okToSlideInSub = new Array();
    var subPositioned = new Array();
    
 
    function stopAutoHide()
    {
        autoHideTimer = -1;
    }
    
    function initAutoHide()
    {
        autoHideTimer = 0;
        if(autoHideTimer>=0)autoHide();
    }
    
    function autoHide()
    {
        
        if(autoHideTimer>timeBeforeAutoHide)
        {
            
            if(activeMainMenuItem){
                activeMainMenuItem.className='';
                activeMainMenuItem = false;
            }
            
            if(activeSubMenuId){
                var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
                showSub();
            }
        }else{
            if(autoHideTimer>=0){
                autoHideTimer+=50;
                setTimeout('autoHide()',50);
            }
        }
    }   
    
    function getTopPos(inputObj)
    {       
      var returnValue = inputObj.offsetTop;
      while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
      return returnValue;
    }
    
    function getLeftPos(inputObj)
    {
      var returnValue = inputObj.offsetLeft;
      while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
      return returnValue;
    }
    
    function showSub()
    {
        var subObj = false;
        if(this && this.tagName){
            var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
            okToSlideInSub[numericId] = false;
            var subObj = document.getElementById('subMenuDiv' + numericId);
            if(activeMainMenuItem)activeMainMenuItem.className='';
            if(subObj){
                if(!subPositioned[numericId]){
                    if(slideDirection=='right'){
                        subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
                    }else{
                        subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
                        
                    }
                    submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
                    subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
                    subPositioned[numericId] = true;
                }               
                subObj.style.visibility = 'visible';
                subObj.style.zIndex = currentZIndex;
                currentZIndex++;    
                this.className='activeMainMenuItem';
                activeMainMenuItem = this;
            }
        }else{
            var numericId = activeSubMenuId;
        }
        if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
        if(numericId!=activeSubMenuId && this && subObj){
            subObj.style.width = '0px'; 
            slideMenu(numericId,slideSpeed_out);
            activeSubMenuId = numericId;
        }else{
            if(numericId!=activeSubMenuId)activeSubMenuId = false;
        }
        if(showSubOnMouseOver)stopAutoHide();
    }
    
    function slideMenu(menuIndex,speed){
        var obj = submenuObjArray[menuIndex]['divObj'];
        var obj2 = submenuObjArray[menuIndex]['ulObj'];
        var width = obj.offsetWidth + speed;
        if(speed<0){
            if(width<0)width = 0;
            obj.style.width = width + 'px';
            if(slideDirection=='left'){
                obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
                obj2.style.left = '0px';
            }else{
                obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
            }
            if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
                obj.style.visibility = 'hidden';
                obj.style.width = '0px';
                if(activeSubMenuId==menuIndex)activeSubMenuId=false;
            }
            
        }else{
            if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
            if(slideDirection=='left'){
                obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
                obj2.style.left = '0px';
            }else{
                obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px' 
            }       
            
            obj.style.width = width + 'px';
            if(width<submenuObjArray[menuIndex]['width']){
                setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
            }else{
                okToSlideInSub[menuIndex] = true;
            }
        }
    }
    function resetPosition()
    {
        subPositioned.length = 0;
    }
            
    function initLeftMenu()
    {
        var menuObj = document.getElementById('dhtmlgoodies_menu'); 
        var mainMenuItemArray = new Array();
        
        var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
        while(mainMenuItem){
            if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
                mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
                var aTag = mainMenuItem.getElementsByTagName('A')[0];
                if(showSubOnMouseOver)
                    aTag.onmouseover = showSub; 
                else
                    aTag.onclick = showSub; 
            }
            mainMenuItem = mainMenuItem.nextSibling;
        }       
        
        var lis = menuObj.getElementsByTagName('A');
        for(var no=0;no<lis.length;no++){
            if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
            lis[no].onmouseout = initAutoHide;
            lis[no].onmousemove = stopAutoHide;
        }
                
        for(var no=0;no<mainMenuItemArray.length;no++){
            var sub = mainMenuItemArray[no].getElementsByTagName('UL')[0];
            if(sub){
                mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
                var div = document.createElement('DIV');
                div.className='dhtmlgoodies_subMenu';
                document.body.appendChild(div);
                div.appendChild(sub);
                if(slideDirection=='right'){
                    div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
                }else{
                    div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
                }
                div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
                div.id = 'subMenuDiv' + (no+1);
                sub.id = 'submenuUl' + (no+1);
                sub.style.position = 'relative';    
 
                if(navigator.userAgent.indexOf('Opera')>=0){
                    submenuObjArray[no+1] = new Array();
                    submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
                    submenuObjArray[no+1]['divObj'] = div;
                    submenuObjArray[no+1]['ulObj'] = sub;
                    submenuObjArray[no+1]['width'] = sub.offsetWidth;
                    submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
                }
                sub.style.left = 1 - sub.offsetWidth + 'px';    
                
                // if(document.all)div.style.width = '1px'; 
                    
                if(navigator.userAgent.indexOf('Opera')<0){
                    submenuObjArray[no+1] = new Array();
                    submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
                    submenuObjArray[no+1]['divObj'] = div;
                    submenuObjArray[no+1]['ulObj'] = sub;
                    submenuObjArray[no+1]['width'] = sub.offsetWidth;
                    
                    
                    
                    submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
                    if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
                }   
 
                if(!document.all)div.style.width = '1px';           
                    
            }           
        }
            
 
        
        
        menuObj.style.visibility = 'visible';
        
        window.onresize = resetPosition;
    }
    
    
    window.onload = initLeftMenu;
 

¿que debo retocar para que el menu se despliegue hacia abajo en lugar de hacia la derecha?

[sandymiau]

Solo copialo, pegalo y agrega el link de jquery.

Aqui estan codigos jquery, en la siguiente respuesta codigo html5 y en la ultima codigo css.


<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
(function($){
/* hoverIntent by Brian Cherne */
$.fn.hoverIntent = function(f,g) {
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
// instantiate variables
// cX, cY = current X and Y position of mouse, updated by mousemove event
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
var cX, cY, pX, pY;
// A private function for getting mouse position
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY;
};
// A private function for comparing current and previous mouse position
var compare = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// compare mouse positions to see if they've crossed the threshold
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
$(ob).unbind("mousemove",track);
// set hoverIntent state to true (so mouseOut can be called)
ob.hoverIntent_s = 1;
return cfg.over.apply(ob,[ev]);
} else {
// set previous coordinates for next time
pX = cX; pY = cY;
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
}
};
// A private function for delaying the mouseOut function
var delay = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob,[ev]);
};
// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
if ( p == this ) { return false; }
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
// else e.type == "onmouseover"
if (e.type == "mouseover") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).bind("mousemove",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
// else e.type == "onmouseout"
} else {
// unbind expensive mousemove event
$(ob).unbind("mousemove",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
};
// bind the function to the two event listeners
return this.mouseover(handleHover).mouseout(handleHover);
};
})(jQuery);
</script>
<script type="text/javascript" >
/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/
;(function($){
$.fn.superfish = function(op){
var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
},o.delay);
},
getMenu = function($menu){
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
sf.op = sf.o[menu.serial];
return menu;
},
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
return this.each(function() {
var s = this.serial = sf.o.length;
var o = $.extend({},sf.defaults,op);
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).ea ch(function(){
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
.filter('li:has(ul)').removeClass(o.pathClass);
});
sf.o[s] = sf.op = o;
$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
if (o.autoArrows) addArrow( $('>a:first-child',this) );
})
.not('.'+c.bcClass)
.hideSuperfishUl();
var $a = $('a',this);
$a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(f unction(){out.call($li);});
});
o.onInit.call(this);
}).each(function() {
var menuClasses = [c.menuClass];
if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join(' '));
});
};
var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
var o = sf.op;
if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+'-off');
};
sf.c = {
bcClass : 'sf-breadcrumb',
menuClass : 'sf-js-enabled',
anchorClass : 'sf-with-ul',
arrowClass : 'sf-sub-indicator',
shadowClass : 'sf-shadow'
};
sf.defaults = {
hoverClass : 'sfHover',
pathClass : 'overideThisToUse',
pathLevels : 1,
delay : 800,
animation : {opacity:'show'},
speed : 'normal',
autoArrows : true,
dropShadows : true,
disableHI : false, // true disables hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
onHide : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.h overClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
});
})(jQuery);
</script>
<script type="text/javascript">
// Inicia plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
[/HTML]

[sandymiau]

<script type="text/javascript">
// Inicia plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>

[sandymiau]

Código:

<!DOCTYPE html>
<head>
<title></title>
</head><body><ul class="sf-menu"><li class="current"><a href="#a">menu item</a><ul><li><a href="#aa">menu item that is quite long</a></li>
<li class="current"><a href="#ab">menu item</a><ul><li class="current"><a href="#">menu item</a></li><li><a href="#aba">menu item</a></li><li><a href="#abb">menu item</a></li><li><a href="#abc">menuitem</a></li><li><a href="#abd">menu item</a></li></ul></li><li><a href="#">menu item</a>
<ul><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li><li><a href="#">menuitem</a></li><li><a href="#">menu item</a></li></ul></li><li><a href="#">menu item</a><ul><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li></ul></li></ul></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a><ul><li>
<a href="#">menu item</a><ul><li><a href="#">short</a></li><li><a href="#">short</a></li><li><a href="#">short</a></li><li><a href="#">short</a></li><li><a href="#">short</a></li></ul></li><li><a href="#">menu item</a><ul><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li></ul>
</li><li><a href="#">menu item</a><ul><li><a href="#">menu item</a></li>
li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li></ul></li>
<li><a href="#">menu item</a><ul><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li></ul></li><li><a href="#">menu item</a><ul><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li><li><a href="#">menu item</a></li></ul></li></ul></li><li><a href="#">menu item</a></li></ul></body></html>

[sandymiau]

Código:

<style>
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {margin:	0; padding:0; list-style:none;}
.sf-menu {line-height:	1.0;}
.sf-menu ul {position:absolute; top:-999em; width:	10em; /* left offset of submenus need to match (see below) */}
.sf-menu ul li {width:100%;}
.sf-menu li:hover {visibility:	inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {float:	left; position:		relative;}
.sf-menu a {display:	block;position:		relative;}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0; top:2.5em; /* match top ul list item height */z-index:99;}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top:-999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */
top:0;}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */ top:0;}
/*** DEMO SKIN ***/
.sf-menu {float:left;margin-bottom:1em;}
.sf-menu a {border-left:1px solid #fff; border-top:1px solid #CFDEFF; padding:	.75em 1em;text-decoration:none;}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/color:#13a;}
.sf-menu li {background:		#BDD2FF;}
.sf-menu li li {background:		#AABDE6;}
.sf-menu li li li {background:		#9AAEDB;}
.sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:#CFDEFF;outline:		0;}

/*** arrows **/
.sf-menu a.sf-with-ul {padding-right: 	2.25em;min-width:1px; /* trigger IE7 hasLayout so spans position accurately */}
.sf-sub-indicator {position:absolute; display:block; right:.75em; top:1.05em; /* IE6 only */width:10px; height:10px; text-indent:-999em; overflow:hidden; background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */top: 	.8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/}
/* apply hovers to modern browsers */a:focus > .sf-sub-indicator,a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {background-position: -10px -100px; /* arrow hovers for modern browsers*/}
/* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {background-position: -10px 0; /* arrow hovers for modern browsers*/}
/*** shadows for all but IE6 ***/
.sf-shadow ul {background:	url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;-moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px;}
.sf-shadow ul.sf-shadow-off {background: transparent; }
</style>

Solo haz los cambios necesarios dentro de las etiquetas <li> de acuerdo a tus necesidades.

[60NZ4]

antes de ponerme a ello muchas gracias tio =)

voy a leerlos a fondo y luego te contare si lo saco una vez mas muchas gracias

[60NZ4]

Sigo con ello, el resultado es increíble no hay discusión, pero la verdad esque el codigo no lo entiendo, por ello preferiria algo mas simple, relacionado con mi codigo, poner algo asi puede quedar muy bien, pero si no lo entiendo no me ayuda a mejorar, preferia algo mas sencillo , poco a poco llegare a entender el codigo que me has pasado

[sandymiau]

Puedes hacer los cambios al codigo en las primeras variables:

Código:

var timeBeforeAutoHide = 700;   // Microseconds to wait before auto hiding menu(1000 = 1 second)
var slideSpeed_out = 10;    // Steps to move sub menu at a time ( higher = faster) var slideSpeed_in = 10;20.       
var slideTimeout_out = 25;  // Microseconds between slide steps ( lower = faster)
var slideTimeout_in = 10;   // Microseconds between slide steps ( lower = faster)
var showSubOnMouseOver = true;  // false = show sub menu on click, true = show sub menu on mouse over
var fixedSubMenuWidth = false;  // Width of sub menu items - A number(width in pixels) or false when width should be dynamic   
var xOffsetSubMenu = 0;     // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu29.     
var slideDirection = 'right';   // Slide to left or right ?

La variable de tu interés es la ultima:

Código HTML:

var slideDirection = 'right';   // Slide to left or right ?

[60NZ4]

Es evidente que deberia cambiar eso, pero hay no hay informacion relevante, ya que en la linea 100 del codigo:

Código Javascript:

if(!subPositioned[numericId]){
                    if(slideDirection=='right'){
                        subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
                    }else{
                        subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';
                        
                    }
 

hay es donde deberia cambiar algo

[60NZ4]

Hola de nuevo!!!

tras investigar mucho por google

he conseguido sacar un codigo javascript, que junto con una pequeña modificacion en mi css, he conseguido listarlo hacia abajo, la verdad ahora es mucho mas presentable

aunque no se muy bien como funciona me sirve, lo dicho ya investigare mas afondo javascript porque tengo mucha curiosidad en el tema, pero ahora no tengo tiempo

muchas gracias por tu ayuda