tlacaelelrl — 2012-02-03T03:43:47-05:00 — #1
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?
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
paulob — 2012-02-03T12:19:02-05:00 — #2
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.
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 to](http://www.htmldog.com/articles/suckerfish/dropdowns/)p if needed.
I can move the thread to the JS forum if you want to continue with the mootools approach.
tlacaelelrl — 2012-02-03T12:24:57-05:00 — #3
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.
paulob — 2012-02-03T17:53:26-05:00 — #4