iPad bug: using CSS transitions on :hover prevents child element from showing

While building a CSS-powered drop-down navigation, I found a little iOS bug that prevented my main nav elements' sub-menus from showing on :hover. Consider the following markup and css, where a rollover on the outer <li> will reveal the inner <ul>.

<header class="admin_nav">
  <ul>
    <li>
      <a href="#" title="Users">
        <span class="label">Users</span>
      </a>
      <ul>
        <li>
          <a href="#" title="Map">Map</a>
        </li>
      </ul>
    </li>
  </ul>
</header>

header.admin_nav ul li ul {
  visibility:hidden;
  opacity:0;
  -webkit-transition: opacity 0.35s linear;
}

header.admin_nav ul li:hover ul {
  visibility:visible;
  opacity:1;
}

On desktop browsers, this is a nice way to fade in a sub-menu on :hover of the main menu item. But, having the -webkit-transition definition breaks the iPad's handling of this nicely-animated menu. Get rid of the transition, and it works just fine, albeit not quite as slickly.