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

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;
}