Its css: You set absolutely positioned element to "height: 100%" and that is what it did: expand to 100% height of the next element in the cascade: Your window. You better measure elements inside and set height of Your combo in pixels.
Robert On Nov 22, 8:27 am, NicholasJohn16 <[email protected]> wrote: > Hello, I'm currently building a custom component for the Joomla CMS > and I'm including some JavaScript. I'm stuck on a little bit right > now. I'm trying to cause a drop down menu to appear when hovering > over a specific element and its not working properly. > > I'll be using this code in several places and I'm not sure what the > height of all the drop downs menus will be, I figured using height:0% > and height:100% would be the easiest way to hide and show my drop down > menus, but for some reason the drop down extends much farther down and > below the window. > > Here's my code: > $$('.drop-down').addEvents({ > 'mouseenter':function(){ > var field = this.id.split('-')[0]; > var user = this.id.split('-')[1]; > var dl = this.getElement('dl'); > var height = dl.getProperty('height'); > var myFx = new Fx.Tween(dl,{ > duration:'long', > transition:'bounce:out', > property:'height', > unit:'%' > }); > myFx.start(0,100); > }, > 'mouseleave':function(){ > var dl = this.getElement('dl'); > var myFx = new Fx.Tween(dl,{ > duration:'long', > transition:'bounce:in', > property:'height', > unit:'%' > }); > myFx.start(100,0); > } > > }); > > You can view a working example of it athttp://nicholasjohn16.com/drop-down. > > If you hover over one of the rank titles, a drop down will bounce > down. If I enter in the height directly for that element, it displays > properly, but for some reason with the tweening it comes out several > times too long. > > I'm using Mootools 1.2.5 as that's the latest version that Joomla > supports. > > Am I doing something wrong or is there a way to fix this? Any > assistance would be appreciated. > > Nick
