First post so bear with me. I have a multilevel dropdown menu and have added a height transition to give the dropdown a cool scroll effect. Problem is that for some reason the transition only works properly if the overflow on the hidden ul is also hidden. this wouldn't be a problem if I didn't have yet another level of submenu. With overflow:hidden; on the parent ul, you can't see the nested ul that is offset to the right exactly the width of the parent. If I make overflow:visible; in the hover rule-set, then I lose the beginning transition and only get the effect when stop hovering. I tried putting a delay on the overflow transition, but it didn't work. I don't even know if its possible to transition overflow the same way as visibility. I made a jsFiddle. In the fiddle, hover "portfolio" then hover "regular" and there should be another level submenu.
Should I still post the code here even though I have a link to the fiddle?
I have played a bit with your
I have played a bit with your JSfiddle and created my own afterwards.
I have changed your visibility codes to display codes and made your menu work as a block.
This seemed to solve the problem.
You can check the code on the following JSfiddle page.
Hope you are happy with the results.