menus.css in purecss-0.2.0

- old
+ new

@@ -1,12 +1,12 @@
 /*!
-Pure v0.1.1-pre
+Pure v0.2.1-pre
 Copyright 2013 Yahoo! Inc. All rights reserved.
 Licensed under the BSD License.
 https://github.com/yui/pure/blob/master/LICENSE.md
 */
-/*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 {
     position: absolute;
     visibility: hidden;
@@ -33,13 +33,18 @@
     left: 0;
     top: 0;
     visibility: visible;
 }
 
+.pure-menu-open > ul:focus {
+    outline: 0;
+}
+
 .pure-menu li { position: relative; }
 
-.pure-menu a, .pure-menu .pure-menu-heading {
+.pure-menu a,
+.pure-menu .pure-menu-heading {
     display: block;
     color: inherit;
     line-height: 1.5em;
     padding: 5px 20px;
     text-decoration: none;
@@ -64,11 +69,12 @@
 .pure-menu li a { padding: 5px 20px; }
 
 .pure-menu-can-have-children > .pure-menu-label:after {
     content: '\25B8';
     float: right;
-    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif; /* These specific fonts have the Unicode char we need. */
+    /* These specific fonts have the Unicode char we need. */
+    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif;
     margin-right: -20px;
     margin-top: -1px;
 }
 
 .pure-menu-can-have-children > .pure-menu-label {
@@ -89,12 +95,12 @@
 }
 
 /* FIXED MENU */
 .pure-menu-fixed {
     position: fixed;
-    top:0;
-    left:0;
+    top: 0;
+    left: 0;
     width: 100%;
 }
 
 
 /* HORIZONTAL MENU CODE */
@@ -105,22 +111,22 @@
     *display: inline;
     zoom: 1;
     vertical-align: middle;
 }
 
-/* Submenus should still be display:block; */
+/* Submenus should still be display: block; */
 .pure-menu-horizontal li li {
     display: block;
 }
 
 /* Content after should be down arrow */
 .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label:after {
     content: "\25BE";
 }
 /*Add extra padding to elements that have the arrow so that the hover looks nice */
 .pure-menu-horizontal > .pure-menu-children > .pure-menu-can-have-children > .pure-menu-label {
-    padding-right:30px;
+    padding-right: 30px;
 }
 
 /* Adjusting separator for vertical menus */
 .pure-menu-horizontal li.pure-menu-separator {
 	height: 50%;
@@ -141,22 +147,21 @@
 
 /* MAIN MENU STYLING */
 
 .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;
 }
 
 /* remove borders for horizontal menus */
 .pure-menu.pure-menu-horizontal,
 .pure-menu.pure-menu-horizontal .pure-menu-heading {
     border: none;
 }
 
 
-
 /* LINK STYLES */
 
 .pure-menu a {
     border: 1px solid transparent;
     border-left: none;
@@ -171,19 +176,24 @@
 
 .pure-menu .pure-menu-can-have-children > li:hover:after {
     color: #fff;
 }
 
+/* Focus style for a dropdown menu-item when the parent has been opened */
+.pure-menu .pure-menu-open {
+    background: #dedede;
+}
 
 
-/* HOVER STATES */
-.pure-menu li a:hover {
+.pure-menu li a:hover,
+.pure-menu li a:focus {
     background: #eee;
 }
 
 /* DISABLED STATES */
-.pure-menu li.pure-menu-disabled a:hover {
+.pure-menu li.pure-menu-disabled a:hover,
+.pure-menu li.pure-menu-disabled a:focus {
     background: #fff;
     color: #bfbfbf;
 }
 
 .pure-menu .pure-menu-disabled > a {
@@ -240,30 +250,27 @@
     height: 1.1em;
 }
 .pure-paginator .pure-button:focus {
     outline-style: none;
 }
-.pure-paginator .prev, .pure-paginator .next {
+.pure-paginator .prev,
+.pure-paginator .next {
     color: #C0C1C3;
     text-shadow: 0 -1px 0 rgba(0,0,0, 0.45);
 }
 .pure-paginator .prev {
     border-radius: 2px 0 0 2px;
 }
 .pure-paginator .next {
     border-radius: 0 2px 2px 0;
 }
 
-/* RESPONSIVE */
-
 @media (max-width: 480px) {
-
     .pure-menu-horizontal {
-        width:100%;
+        width: 100%;
     }
 
     .pure-menu-children li {
         display: block;
         border-bottom: 1px solid black;
     }
-
 }