I have a typical submenu structure set up like this:
<ul>
<li>
<a href="#">Parent link</a>
<ul>
<li><a href="#">Submenu link</a></li>
</ul>
</li>
</ul>
In my design/mockups, I wanted to use CSS3 transitions to animate the submenus. However, the pointer-events: none solution is not practical with display: none, making it not ideal for live sites.
My plan was to use jQuery to achieve the cross-browser animation I envisioned. I aimed for the submenu to transition from 0 opacity to 100 and rise up with a margin change when the parent <li> is hovered over.
While it may seem complex, here's a simplified version of what I had in mind: http://jsfiddle.net/jwq5R/ (works best in browsers that support pointer-events and CSS3 transitions) but only using jQuery for the animation.
Despite my research efforts, I haven't been able to achieve the desired effect yet.
If anyone can provide guidance or assistance, I would greatly appreciate it. Thank you in advance.