title: Cannot get rid of the blue highliht and cannot detect the element it is on
body: <p>I have a navigation in a <code>ul</code>. The <code>li</code> elements are absolutely positioned When I click one of the links in the list, a blue highlight appears. I could not detect the element the highlight is on. Nor could I get rid of it.</p>
  
  <p>I tried:</p>
  
  <pre><code>-webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  </code></pre>
  
  <p>I also tried many things on the <code>ul</code> and the <code>li</code> elements to no avail.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="navigation" class="processed on" style="top: 530px;"&gt;
      &lt;div class="navBackground"&gt;&lt;/div&gt;
      &lt;a class="open on" href="#main-menu"&gt;Menü&lt;/a&gt;
      &lt;nav id="main-menu" role="navigation" tabindex="-1" class=""&gt;
          &lt;ul class="links inline clearfix"&gt;
              &lt;li class="menu-529 first"&gt;&lt;a href="link1"&gt;link1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu-562"&gt;&lt;a href="link2"&gt;link2&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu-605"&gt;&lt;a href="link3"&gt;link3&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu-606"&gt;&lt;a href="link4"&gt;link4&lt;/a&gt;&lt;/li&gt;
              &lt;li class="menu-563 last"&gt;&lt;a href="link5"&gt;link5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the screenshot of the normal state of the menu:</p>
  
  <p><img src="https://i.stack.imgur.com/OXdid.png" alt="normal state"></p>
  
  <p>And this is the active state of it. You can see the blue border/highlight:</p>
  
  <p><img src="https://i.stack.imgur.com/JnDvb.png" alt="active state"></p>
  
  <p>To make links obvious, I turned off the background images and gave them a red border:</p>
  
  <p><img src="https://i.stack.imgur.com/GXrAR.png" alt="links with border"></p>
  
  <p><img src="https://i.stack.imgur.com/cPbMQ.png" alt="border and highlight"></p>
  
  <p>Still you can see the highlight. There is a 1px gap between the link border and highlight so maybe the highlight is on the <code>li</code>, not the link</p>
  
  <p>So I give a black border to the <code>li</code>'s but that does not solve it as there is still a gap between the border and the highlight.</p>
  
  <p><img src="https://i.stack.imgur.com/BqBiv.png" alt="li items have border"></p>
  
  <p>And there is always one item that is highlighted (to the left top side of the circle, that is the <code>.open</code> link) but it is neither a link (of the menu) nor a `li. </p>
  
  <p>These are screenshots from Chrome browser. In Safari, only that one item is highlighted:</p>
  
  <p><img src="https://i.stack.imgur.com/gd1WE.png" alt="how it looks in Safari"></p>
  
  <p>Now, any help would be highly appreciated.</p>