Mac OS下的Chrome中未显示块元素

Question

子菜单（“lvl2”类）在鼠标悬停时显示在除MacOS Chrome之外的所有浏览器中。

操作系统版本：10.10.4， chrome版本：45.0.2454.85

以下是代码：http://jsfiddle.net/166nj6rp/2/

JS

$(document).ready(function () {
    $('#main_menu  ul.lvl1 > li').on('mouseenter', function () {
        $(this).find('ul').show(); //.css('display', 'block');
    }).on('mouseleave', function () {
        $(this).find('ul').hide();
    });
});

HTML

<div id="main_menu">
    <ul>
        <li> <a href="#">Main</a>

            <ul class="lvl1">
                <li> <a href="#">Mouseover here</a>

                    <ul class="lvl2">
                        <li> <a href="#">First</a>

                        </li>
                        <li> <a href="#">Second</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

样式

#main_menu {
    background:#333;
    color:#cccccc;
    height:43px;
    position:relative;
}
#main_menu ul {
    list-style:none;
    display:block;
    padding-left:0px;
}
#main_menu > ul {
    height:43px;
}
#main_menu > ul > li {
    display:inline;
    position:relative;
    line-height: 37px;
}
#main_menu > ul > li > a {
    padding:9px 3px 10px 8px;
}
#main_menu > ul > li > ul {
    display:block;
    background:#333;
    position:absolute;
    left:-1px;
    top:30px;
    min-width:180px;
    z-index:999;
}
#main_menu > ul > li li a {
    display:block;
}
#main_menu > ul > li li a:hover {
    background:#555;
}
#main_menu ul.lvl1 > li:hover {
    background:#555;
}
#main_menu ul.lvl1 > li {
    position:relative;
}
#main_menu ul.lvl2 {
    display:none;
    position: absolute;
    top:0px;
    left:150px;
    background:#333;
    min-width:150px;
    max-width:300px;
}
#main_menu > ul li > a {
    color:#ccc;
    font-size:15px;
}