improve CSS for site navigation bar (bug 1082161, bug 1083613, bug 1083614)

# tasks completed
* remove unused rules, optimise selectors, and make things more OOCSS-y
* improve navigation hover states ([bug 1082161](https://bugzilla.mozilla.org/show_bug.cgi?id=1082161))
* use CSS instead of JS to toggle category drop-down on desktop ([bug 1083613](https://bugzilla.mozilla.org/show_bug.cgi?id=1083613))
* add borders to desktop navigation items ([bug 1083614](https://bugzilla.mozilla.org/show_bug.cgi?id=1083614))
* fixed CSS to actually hide the link outlines on focus

# before
## normal nav link hovered
![screenshot 2014-10-15 21 32 53](https://cloud.githubusercontent.com/assets/203725/4657634/89759476-54ed-11e4-8c9c-9957a8d1a618.png)
## "categories" link hovered
![screenshot 2014-10-15 21 29 47](https://cloud.githubusercontent.com/assets/203725/4657624/58acb928-54ed-11e4-8198-ef6397770799.png)

# after
## normal nav link hovered
![screenshot 2014-10-15 21 32 38](https://cloud.githubusercontent.com/assets/203725/4657631/7ba52c12-54ed-11e4-8a01-51671bff2894.png)
## "categories" link hovered
![screenshot 2014-10-15 21 32 29](https://cloud.githubusercontent.com/assets/203725/4657632/7bac2a80-54ed-11e4-9f24-575f364db989.png)
n/m I misread it as something else. Neat idea though slightly tricky for human readability. The `:hover` visibility is better than JS but I had it removed from my mental repo since it had issues in earlier versions of IE (maybe it still does though not sure if we should care).