This appears on Chrome and Safari, but not Firefox. I am on OS X 10.6.latest, running Chrome 29. Colleagues report this on newer versions of OS X too.

When I click on a menu item, a large highlight appears around the entire menu bar. I don't get this on other clickable elements of the page, such as menu blocks, node links, or page title.

The shape is not quite rectangular -- there's a funny blob in the bottom left hand corner, which even more oddly is a different shape on Chrome and Safari.

zen-chrome-menu-highlight.png

Files: 
CommentFileSizeAuthor
zen-chrome-menu-highlight.png30.86 KBjoachim

Comments

Priority:Major» Normal

The outline is displayed since #1532742: Fix skiplink behavior for Opera and Webkit browsers was committed. The outline can be hidden with outline: 0; on the :focus pseudo class of the element that has the tabindex, which by default is nav id="main-menu" role="navigation", for example, nav[role=navigation]:focus {outline: 0;} the tabindex attribute:

[tabindex="-1"] {
  outline: 0;
}

Reference: https://github.com/suitcss/base/blob/gh-pages/base.css

This fix seems fine concerning accessibility, in that the focus still shows the dotted outline tabbing to the individual menu items, and we don't use it visually for the whole nav container.

---
The odd shape outline is an artifact from earlier code of the element-invisible method used. While I'd like to make that go away for you too, I believe getting rid of the outline will make that a non issue. Zen still uses code for theme links for main and secondary menus, with a comment recommending to build your own menu. The inline .clearfix class here uses D7 clearfix (where Zen's sass uses compass clearfix) and the D7 clearfix's content: "."; causes the space after the element.

Thanks!
I ran into this as well and this post fixes it…