无法摆脱蓝色高光，无法检测到它所在的元素

Question

我在ul中有导航。 li元素绝对定位当我单击列表中的一个链接时，会出现蓝色突出显示。我无法检测到突出显示的元素。我也不能摆脱它。

我试过了：

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

-webkit-tap-highlight-color: rgba(0,0,0,0);

我还尝试了ul和li元素上的很多内容无效。

这是html：

<div id="navigation" class="processed on" style="top: 530px;">
    <div class="navBackground"></div>
    <a class="open on" href="#main-menu">Menü</a>
    <nav id="main-menu" role="navigation" tabindex="-1" class="">
        <ul class="links inline clearfix">
            <li class="menu-529 first"><a href="link1">link1</a></li>
            <li class="menu-562"><a href="link2">link2</a></li>
            <li class="menu-605"><a href="link3">link3</a></li>
            <li class="menu-606"><a href="link4">link4</a></li>
            <li class="menu-563 last"><a href="link5">link5</a></li>
        </ul>
    </nav>
</div>

这是菜单正常状态的屏幕截图：

这是它的活跃状态。您可以看到蓝色边框/突出显示：

为了使链接变得明显，我关闭了背景图像并给了它们一个红色边框：

仍然可以看到亮点。链接边框和高亮显示之间有1px的间隙，因此高亮显示在li上，而不是链接

所以我给li提供了黑色边框，但这并没有解决它，因为边框和高光之间仍然存在差距。

总有一个项目突出显示（在圆圈的左上方，即.open链接）但它既不是链接（菜单）也不是`li。

这些是Chrome浏览器的屏幕截图。在Safari中，只突出显示一个项目：

现在，任何帮助都将受到高度赞赏。

Answer 1

请将此代码添加到您的CSS中，这应解决问题：

nav#main-menu {
     outline: none;
}