How do I remove the blue shading around Navigation elements with sub-menu items?

Question

I'd appreciate any help with this.

I've been through the styles and can't find what is causing this problem; I need to remove the blue shadow element that occurs when hovering over a top navigation menu element. This is only happening for items with sub-menu items and only happen sin Chrome and Safari.

Here's the link to the problem navigation http://www.freedomflooring.co.nz/testing-changes.html

The site is using Zurb Foundation framework.

<nav class="marketing-topbar">

<div class="desktopMenuWrap ">
    <ul class="dropdown menu" data-dropdown-menu data-click-open="false">

        <li><a href="#">About</a>
          <ul class="submenu menu vertical" data-submenu>

              <li><a href="#">Approach</a></li>
              <li><a href="#">Finance</a></li>

            </ul>
        </li>    
    </ul>      
</div> 


</nav>

ForguesR ForguesR · Accepted Answer · 2015-12-24T03:20:15

You are probably looking for outline: 0px; which will remove the "border" when an element is focused. I tested it with Chrome and it works well for me.

See https://developer.mozilla.org/en/docs/Web/CSS/outline for more information on outline.

How do I remove the blue shading around Navigation elements with sub-menu items?

1 Answers