Hello!
I have a Motools menu that I want to style, some menu items have sub menus that are showed when hovering over the parent li however the list of items is not displayed properly, can someone help me figure out what I’m doing wrong?
http://ury-yolotl.com/test/menu.html
the fourth menu item has a sub menu in which it’s items also have sub menus, if you hover over them you will see that the sub menu will display only the top portion of the ul as only the height of the first child ul is used
Hi,
This seems to be a javascript question because you have no css to hide and show the menu and its all done with javascript.
The js is adding a nested div with overflow:hidden and then revealing the submenu on hover. However the element is still in the flow and taking up space and this actions automatically hides sub menus.
Usually you would start with a fully working css menu and then layer javascript on top.
The basics are that you set the nested ul to position:absolute and hide it off screen and then on hover bring the menu back into view while at the same time hiding any further nested menus… and so on.
You should use something like the suckerfish menus to start with and then [URL=“http://users.tpg.com.au/j_birch/plugins/superfish/”]layer js on top if needed.
I can move the thread to the JS forum if you want to continue with the mootools approach.
yes that would be great if you could move it however I am actually doing what you recommended, I am now working with the CSS on the main items and will be working my way down.
As you have moved on now with your other thread I’ll close this thread for now but if you need it opened and moved moved to javascript then just send me a PM and I’ll move it.