Merge pull request #70 from tilomitra/menu-outline

Fix for issue #22: Remove dotted focus border from menus

HISTORY.md

@@ -50,6 +50,9 @@ NEXT
 * Added `pure-menu-separator-vertical` classname that can be used to visually
   separate horizonal menu items. (Issue #53) (codepb, mseri)
 
+* Focused menus have an `outline: none` by default. Instead, menu-items that
+  have been opened to display children (in a drop-down menu) get a slight
+  background (`#dedede`) for accessibility. (Issue #22)
 
 0.1.0 (2013-05-24)
 ------------------

src/menus/css/menus-core.css

@@ -1,4 +1,4 @@
-/*csslint adjoining-classes:false*/
+/*csslint adjoining-classes:false, outline-none:false*/
 /*TODO: Remove this lint rule override after a refactor of this code.*/
 
 .pure-menu ul {
@@ -29,6 +29,10 @@
     visibility: visible;
 }
 
+.pure-menu-open > ul:focus {
+    outline: none;
+}
+
 .pure-menu li { position: relative; }
 
 .pure-menu a, .pure-menu .pure-menu-heading {

src/menus/css/menus.css

@@ -5,7 +5,7 @@
 
 .pure-menu.pure-menu-open,
 .pure-menu.pure-menu-horizontal li .pure-menu-children {
-    background: #ffffff; /* Old browsers */
+    background: #fff; /* Old browsers */
     border: 1px solid #b7b7b7;
 }
 
@@ -35,6 +35,10 @@
     color: #fff;
 }
 
+/* Focus style for a dropdown menu-item when the parent has been opened */
+.pure-menu .pure-menu-open {
+    background: #dedede;
+}
 
 
 /* HOVER STATES */