Why is YouTube interfering with the dropdown menus of the iPad hover?

Question

I came across the strange behavior of simple CSS canopies that drop down menus on the iPad (iOS 7).

The menus work as expected, first click the drop-down list and the second click the link if there is no YouTube video on the page. If there is a YouTube video on the page, the first briefly shows the menu for a short time, and then goes to the link without a second click.

HTML:

        <nav>
            <ul>
                <li>
                    <a href="/menutest/index.html">Menu Test Home</a>
                    <ul>
                        <li>
                            <a href="/menutest/youtube.html">Youtube Video Page</a>
                        </li>
                        <li>
                            <a href="/menutest/plain.html">Plain Text Page</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

CSS:

nav ul li ul {
    display:none;
}

nav ul li:hover ul {
    display:block;
}

YouTube Code:

<iframe src="http://www.youtube.com/embed/O8_eFRZP1uQ?showinfo=0&rel=0" frameborder="0"></iframe>    

This issue does not occur with videos hosted on Vimeo or Wistia.

I posted an earlier question on this topic, but removed it because I did not highlight the problem and did not ask a clear question.

An example can be found at http://silvermapleweb.com/menutest/

Answer 1

/index.html, Home Test Test, , , , iOS Safari , .

youtube (/youtube.html) " ", . , ( /index.html).

, href event.preventDefault(); " ".

Answer 2

z-index . :

nav ul li:hover ul {
    display:block;
    z-index:1000;
}

Answer 3

CSS. JavaScript . JavaScript (, , ):

jQuery('nav > ul > li').hover(function() {
var $parent = jQuery(this);
var $dropdown = $parent.children('ul');

$dropdown.show(0,function() {    
    $parent.mouseleave(function() {
        var $this = jQuery(this);
        $this.children('ul').fadeOut(10);
    });
});
});

: block; CSS.

HTML, !

: http://brianshim.com/webtricks/drop-down-menus-on-ios-and-android/