Comportamento strano in Chrome con HTML selezionare

Question

Ho un menu CSS piuttosto semplice, che mostra un elenco UL al passaggio del mouse. Da tempo fa, in Chrome, quando seleziono un'opzione che si trova nella stessa posizione del menu che è nascosto da display: none, ottengo il passaggio del mouse sul menu.

Come un'opzione di selezione può passare sopra un oggetto nascosto al clic? Questo succede solo su Chrome.

Ho provato a cambiare selezionare z-index a un valore più alto. Cambiato z-index per il menu a -1 fino genitore ul ottenere aleggiava, ma senza successo, ancora ottenere il problema

Here è un codice

Prova selezionare l'opzione test5:

ul.menu ul { 
    display: none !important; 
} 

ul.menu li:hover>ul { 
    display: block !important; 
} 

ul.menu ul { 
    position: absolute; 
    left: -1px; 
    top: 98%; 
} 

ul.menu ul ul { 
    position: absolute; 
    left: 98%; 
    top: -2px; 
} 

ul.menu, ul.menu ul { 
    margin: 0; 
    list-style: none; 
    padding: 2px; 
} 

ul.menu li ul.links { 
    margin: 0; 
    list-style: none; 
    padding: 0; 
    border-color: #AAAAAA; 
    border-width: 1px; 
    border-style: solid; 
} 

ul.menu ul.links li { 
    margin: 0px; 
    list-style: none; 
    padding: 2px; 
    background-color: #F5F5F5; 
    background-repeat: repeat; 
} 

ul.menu table { 
    border-collapse: collapse; 
} 

ul.menu { 
    display: block; 
    float: left; 
} 

ul.menu ul { 
    width: 160.65px; 
} 

ul.menu li { 
    display: block; 
    margin: 0; 
    font-size: 0px; 
    margin-right: 4px; 
} 

ul.menu a:active, ul.menu a:focus { 
    outline-style: none; 
} 

ul.menu a, ul.menu li.dis a:hover, ul.menu li.sep a:hover { 
    display: block; 
    vertical-align: middle; 
    border-width: 0px; 
    border-color: #6655ff; 
    border-style: solid; 
    text-align: left; 
    text-decoration: none; 
    padding: 3px; 
    font-family: Arial, Helvetica, Verdana; 
    font-size: 11px; 
    color: #000; 
    text-decoration: none; 
    cursor: default; 
    border: 1px solid transparent; 
} 

ul.menu ul.links a { 
    display: block; 
    vertical-align: middle; 
    background-color: #F5F5F5; 
    border-width: 0px; 
    border-color: #6655ff; 
    border-style: solid; 
    text-align: left; 
    text-decoration: none; 
    padding: 4px; 
    font: normal 11px Verdana; 
    color: black; 
    text-decoration: none; 
    cursor: default; 
    border: 1px solid transparent; 
} 

ul.menu span { 
    display: none; 
    overflow: hidden; 
} 

ul.menu li { 
    display: block; 
    float: left; 
} 

ul.menu ul li { 
    float: none; 
} 

ul.menu ul a { 
    text-align: left; 
    white-space: nowrap; 
} 

ul.menu li.sep { 
    text-align: center; 
    padding: 0px; 
    line-height: 0; 
    height: 100%; 
} 

ul.menu li.sep span { 
    float: none; 
    padding-right: 0; 
    width: 5px; 
    height: 16px; 
    display: inline-block; 
    background-color: #AAAAAA; 
    background-image: none; 
} 

ul.menu ul li.sep span { 
    width: 80%; 
    height: 3px; 
} 

ul.menu li:hover { 
    position: relative; 
    z-index: 999999; 
} 

ul.menu li:hover>a { 
    text-decoration: none; 
    border: 1px inset #CCCCCC; 
    background: #E3E3E3; 
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
} 

ul.menu li a:hover { 
    position: relative; 
    text-decoration: none; 
    border: 1px inset #CCCCCC; 
    background: #E3E3E3; 
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
} 

ul.menu ul.links li:hover>a { 
    background: #F8FBFE; 
    text-decoration: none; 
    border-radius: 1px; 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border: 1px solid #BAE3FE; 
} 

ul.menu ul.links li a:hover { 
    background: #F8FBFE; 
    position: relative; 
    text-decoration: none; 
    border-radius: 1px; 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border: 1px solid #BAE3FE; 
} 

ul.menu li.dis a { 
    color: #AAAAAA !important; 
} 

ul.menu img { 
    border: none; 
    float: left; 
    _float: none; 
    margin-right: 4px; 
    width: 16px; 
    height: 16px; 
} 

ul.menu ul img { 
    width: 16px; 
    height: 16px; 
} 

ul.menu img.over { 
    display: none; 
} 

ul.menu li.dis a:hover img.over { 
    display: none !important; 
} 

ul.menu li.dis a:hover img.def { 
    display: inline !important; 
} 

ul.menu li:hover > a img.def { 
    display: none; 
} 

ul.menu li:hover > a img.over { 
    display: inline; 
} 

ul.menu a:hover img.over,ul.menu a:hover ul img.def,ul.menu a:hover a:hover ul img.def,ul.menu a:hover a:hover a:hover ul img.def,ul.menu a:hover a:hover img.over,ul.menu a:hover a:hover a:hover img.over,ul.menu a:hover a:hover a:hover a:hover img.over { 
    display: inline; 
} 

ul.menu a:hover img.def,ul.menu a:hover ul img.over,ul.menu a:hover a:hover ul img.over,ul.menu a:hover a:hover a:hover ul img.over,ul.menu a:hover a:hover img.def,ul.menu a:hover a:hover a:hover img.def,ul.menu a:hover a:hover a:hover a:hover img.def { 
    display: none; 
} 

ul.menu a:hover ul,ul.menu a:hover a:hover ul,ul.menu a:hover a:hover a:hover ul { 
    display: block; 
} 

ul.menu a:hover ul ul,ul.menu a:hover a:hover ul ul { 
    display: none; 
} 

ul.menu span { 
    display: block; 
    background-position: right center; 
    background-repeat: no-repeat; 
    padding: 0 2px 0; 
} 

ul.menu ul.links span { 
    background-image: url(./images/arr_nav.gif); 
} 

ul.menu ul.links a:hover span,ul.menu table a:hover a:hover span,ul.menu table a:hover a:hover a:hover span { 
    background-image: url(./images/arr_nav.gif); 
} 

/* DHTML WINDOW */ 
.dhtmlwindow { 
    position: absolute; 
    border: 1px solid rgb(153, 153, 153); 
    #border-color: rgb(142, 153, 186); 
    #border-color: rgba(142, 153, 186, 0.3); 
    visibility: hidden; 
    background-color: #fff; 
} 

Answer 1

E ' sembra essere un bug solo in Chrome, non potrei replicare in FF.

Prova ad aggiungere queste 2 linee che hanno funzionato quando le ho provate nel tuo Fiddle.

ul.menu li {pointer-events: none;} 
ul.menu:hover li {pointer-events: auto;}