CSS下拉链接在链接之外工作

Question

我有一个css控制的下拉列表，在笔记本电脑上工作正常，但在ipad上没有。发生的事情是，如果我只是略微点击链接文本的左侧或右侧，导航就会起作用。如果我直接点击它没有的文本。我需要一些帮助。

我的css是：

.main-menu ul li ul {
    position: absolute;
    top: 25px;
    left: 0;
    min-width: 160px;
    opacity: 0;
    margin: 0px;
    padding: 0px;
    visibility: hidden;
    text-align: left;
    background: #333;
}
.main-menu ul li ul li  {
    display: block;
    color: #fff;
    padding: 10px 5px;
    cursor: pointer;
}
.main-menu ul li ul li a:hover {
    color: #f1c40f;
}
.main-menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
} 

Wordpress代码是：

<nav class="main-menu right" role="navigation">
        <?php wp_nav_menu( array( 'menu' => 'Main Menu', 'link_before' => '<span onClick="return true">', 'link_after' => '</span>' ) ); ?>
    </nav>