Hightlighting the down-arrow next to user name on hover

- the right-arrow wasn't highlighted on hover, which was
  inconsistent with the other header items

- changed the user-menu items highlight color from #fff to #fafafa, which is
  consistent across the header

- refactored the css to reduce specificity

- refactored css to use nesting in class names instead of nesting in
  scss (as advocated by http://smacss.com) to reduce specificity and
  to enhance readability

app/assets/stylesheets/header.css.scss

@@ -227,57 +227,60 @@ body > header {
     border-left: 1px solid #333;
     border-right: 1px solid #333;
 
-    li {
-      a {
-        padding: 4px;
-        height: 100%;
-        color: #939393;
-
-        &:hover {
-          background-color: $blue;
-          color: #fff;
-          text-decoration: none;
-        }
-      }
-
-      &:first-child {
-        padding: 5px 0;
-
-        a {
-          padding-right: 15px;
-
-          &:hover {
-            background-color: transparent;
-            text-decoration: none;
-          }
-
-          &:focus { :outline: none; }
-        }
-
-        .right {
-          position: absolute;
-          right: 5px;
-        }
-      }
-    }
-
     &.active {
       margin-top: -3px;
       @include dropdown-shadow;
       background-color: rgb(34,30,30);
       border: 1px solid #999;
     }
+  }
 
-    .avatar {
-      height: 22px;
-      width: 22px;
-      position: absolute;
-      left: 7px;
-      top: 9px;
-      display: block;
+  .user-menu-item a {
+    padding: 4px;
+    height: 100%;
+    color: #939393;
+
+    &:hover {
+      background-color: $blue;
+      color: #FAFAFA;
+      text-decoration: none;
+    }
+  }
+
+  .user-menu-trigger {
+    padding: 5px 0;
+
+    &:hover {
+      color: #FAFAFA;
+      .user-name { color: #FAFAFA; }
     }
   }
 
+  .user-name {
+    padding: 4px 15px 4px 4px;
+
+    &:hover {
+      background-color: transparent;
+      text-decoration: none;
+    }
+
+    &:focus { :outline: none; }
+  }
+
+  .user-menu-more-indicator {
+    position: absolute;
+    right: 5px;
+  }
+
+  .user-menu-avatar {
+    height: 22px;
+    width: 22px;
+    position: absolute;
+    left: 7px;
+    top: 9px;
+    display: block;
+  }
+
   .header-nav {
     font-weight: bold;
     float: left;

app/assets/templates/header_tpl.jst.hbs

@@ -85,21 +85,21 @@
   </div>
 
   <ul class="dropdown" id="user_menu">
-    <li>
-    <div class="right">
-      ▼
-    </div>
-    <img alt="{{current_user.name}}" class="avatar" src="{{current_user.avatar.small}}" title="{{current_user.name}}" />
-    <a href="#">{{current_user.name}}</a>
+    <li class="user-menu-trigger">
+      <div class="user-menu-more-indicator">
+        ▼
+      </div>
+      <img alt="{{current_user.name}}" class="user-menu-avatar" src="{{current_user.avatar.small}}" title="{{current_user.name}}" />
+      <a class="user-name" href="#">{{current_user.name}}</a>
     </li>
-    <li><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
-    <li><a href="/contacts">{{t "header.contacts"}}</a></li>
-    <li><a href="/user/edit">{{t "header.settings"}}</a></li>
-    <li><a href="/help">{{t "header.help"}}</a></li>
+    <li class="user-menu-item"><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
+    <li class="user-menu-item"><a href="/contacts">{{t "header.contacts"}}</a></li>
+    <li class="user-menu-item"><a href="/user/edit">{{t "header.settings"}}</a></li>
+    <li class="user-menu-item"><a href="/help">{{t "header.help"}}</a></li>
     {{#if current_user.admin}}
-      <li><a href="/admins/user_search">{{t "header.admin"}}</a></li>
+      <li class="user-menu-item"><a href="/admins/user_search">{{t "header.admin"}}</a></li>
     {{/if}}
-    <li><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li>
+    <li class="user-menu-item"><a href="/users/sign_out" data-method="delete">{{t "header.log_out"}}</a></li>
   </ul>