Yellow border on hover using ZeroClipboard <p>I have the following code generating a ZeroClipboard element for me:</p> <pre><code>RunClipboardClient: function (elementSelector) { var client = new ZeroClipboard($(elementSelector)); client.on("load", function (client) { client.on("datarequested", function (client) { client.setText("Text here"); }); client.on("complete", function (client, args) { $("#ActiveMenu").hide(); }); }); } </code></pre> <p>Im using this in combination with <a href="http://medialize.github.io/jQuery-contextMenu/" rel="nofollow noreferrer">jQuery Context Menus</a> open event. The problem is that there is a odd yellow border around the element when hovering the second time I open the context menu.</p> <p><img src="https://i.stack.imgur.com/X2LPe.jpg" alt="enter image description here"></p> <p>I tried applying <code>outline: none</code> to the styling but it did not remove the border. This is the code i'm running when generating the context menu:</p> <pre><code>$(".MenuSmall").destroyContextMenu(); $(".MenuSmall").contextMenu( { menu: 'ActiveMenu' }, // On item clicked function (action, element) { // Run Menu Item action }, // On close function () { // Run other code }, // On open function (event) { self.RunClipboardClient("#pdf_link"); } ); </code></pre> <p>This is the HTML using for the context menu</p> <pre><code>&lt;ul id="ActiveMenu"&gt; &lt;li class="MenuPDFLink CustomMenuOption" id="pdf_link"&gt;&lt;div class="iconsBlack PDFLink"&gt;&lt;/div&gt; &lt;a href="#"&gt;Link til PDF&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>