Website Navigation Bar - Potential code soup I've had a bit of help designing the header for a website here: http://jsfiddle.net/gxLt5/21/

It looks and works exactly how I had hoped. That said, I do feel like the code is a bit grotty, and I'm sure there is a more elegant solution to achiving the same result. 

Could anyone please give me some feedback on the HTML and CSS so see if it can be improved or restructured?

HTML

&lt;nav class="header"&gt; 
    &lt;ul class="navigation"&gt;
        &lt;li&gt;&lt;a href="#"&gt;&lt;img src="smiley.gif" alt="logo" height="50" width="80"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li id="a" class=""&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;A&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="b" class=""&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;B&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="account" class="right"&gt; &lt;a href="/admin/profile"&gt;&lt;span&gt;&lt;/span&gt;Test Test&lt;/a&gt;

            &lt;ul class="dropdown"&gt;
                &lt;li&gt;&lt;a href="/users/logout"&gt;Log out&lt;/a&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;


CSS

/* 1.0 Resets
************************************/
 * {
    margin: 0;
    padding: 0;
}
ul {
    font-size: 0;
}
html, body {
    height: 100%;
    max-height: 100%;
}
body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    background-color: white;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
/* 2.0 Layout
************************************/
 .header {
    background-color: #9B59B6;
    height: 50px;
}
.logo {
    height: 50px;
    margin-bottom: 30px;
}
.navigation {
    position: absolute;
    display:inline-block;
    z-index: 1000;
        width: 100%;
}
.navigation li:not(:last-child){
   float:left
}
.navigation li a {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 30px;
    opacity: 0.7;
}
.navigation li a:hover, .navigation li.active a {
    opacity: 1;
}
.navigation li span {
    display: inline-block;
    background: url(http://i.imgur.com/R6Fjt4e.png) no-repeat left center;
    width: 16px;
    height: 16px;
    /*overflow:hidden;*/
    margin-right: 16px;
}
.container {
    padding-top: 14px;
}
.dialog {
    display: none;
}
/* 4.0 Navigation Styles
************************************/
 #dashboard span {
    background-position: -64px -0px;
}
#vacancies span {
    background-position: -160px 0;
}
#candidates span {
    background-position: -32px -0;
}
#company span {
    background-position: -288px 0;
}
#account span {
    background-position: -128px 0;
}

.right {
    float: right;
}
nav ul ul {
    display: none;
}
nav ul li:hover &gt; ul {
    display: block;
    position: absolute;
    background-color: #9B59B6;
}
.dropdown li {
    display: block;
}
First, I'm not sold on your use of &lt;nav&gt; as a header. You can assign an aria role=banner to it or replace it with the tag intended to be a &lt;header&gt;. I understand you're using your logo as a navigation link (e.g. home), however, you still have to make the browser understand what your header is.

Working off your code:

judging from the css used in your code I'm assuming IE8 support isn't required

If you're going to use a &lt;span&gt; for an icon (I'm assuming your trying to avoid using a content image), I'd recommend using an svg instead, see Fiddle (this uses natural elements to specify header/nav). There are plenty of SVG Fallbacks for browsers that don't support SVG.

If you want to forgo using a "content" image I'd use pseudo elements :before or :after to place the icon, see Fiddle. (this uses aria roles to specify header/nav)

How I'd approach it:

Your setup is, for the most part, solid. However, I'd go about it a little differently. Check this Fiddle.
(disclaimer: I wrote this up while still intoxicated from the fourth, so apologize ahead of time as it could probably be written better) 

HTML

&lt;header class="header" role="banner"&gt;
  &lt;a href="/"&gt;
    &lt;img src="logo.png"&gt;
    &lt;h1 class="visuallyhidden"&gt;Title&lt;/h1&gt;
  &lt;/a&gt;
  &lt;nav class="navigation" role="navigation"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
         &lt;a href="#"&gt;Test&lt;/a&gt;
         &lt;ul&gt;
           &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/header&gt;


CSS

* {
    margin:0;
    padding:0}
*,
*:before,
*:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box }

html,
body{
    height: 100%;
    max-height: 100%}
html{
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-family: sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,.004)}
body{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:13px;
    font-size:.8125rem;
    background-color:white}
a{text-decoration:none}
.visuallyhidden{
  border:0;
  clip:rect(0,0,0,0);clip:rect(0000);
  height:1px;height:.0625rem;
  margin:-1px;margin:-.0625rem;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;width:.0625rem}
.header{
    background-color:#9B59B6;
    padding:0 1.5625rem}
.navigation{
    display:inline-block;
    padding-left:25px;
    width:calc(100% - 80px)}
.navbar{list-style:none}
.navbar li{
    display:inline-block;
    float:left;
    position:relative}
.navbar li a:before{
    content:'';
    width:16px; width:1rem;
    height:16px; height:1rem;
    position:absolute;
    top:50%;
    left:10px;
    margin-top:-8px;
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik05LjczMiAxMC45OGMtMC4zNDUtMC4wNTUtMC4zNTMtMS4wMDUtMC4zNTMtMS4wMDVzMS4wMTUtMS4wMDUgMS4yMzYtMi4zNTZjMC41OTUgMCAwLjk2My0xLjQzNyAwLjM2OC0xLjk0MiAwLjAyNS0wLjUzMiAwLjc2NS00LjE3Ny0yLjk4Mi00LjE3N3MtMy4wMDcgMy42NDUtMi45ODIgNC4xNzdjLTAuNTk1IDAuNTA1LTAuMjI4IDEuOTQyIDAuMzY4IDEuOTQyIDAuMjIxIDEuMzUxIDEuMjM2IDIuMzU2IDEuMjM2IDIuMzU2cy0wLjAwOCAwLjk1LTAuMzUzIDEuMDA1Yy0xLjExMyAwLjE3Ny01LjI2OCAyLjAxMC01LjI2OCA0LjAyMGgxNGMwLTIuMDEwLTQuMTU1LTMuODQzLTUuMjY4LTQuMDIweiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPgo8L3N2Zz4K) no-repeat}
.navbar li:last-of-type{float:right}
.navbar li:last-of-type .dropdown:before{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik0xNC41OSA5LjUzNWMtMC44MzktMS40NTQtMC4zMzUtMy4zMTcgMS4xMjctNC4xNjRsLTEuNTcyLTIuNzIzYy0wLjQ0OSAwLjI2My0wLjk3MiAwLjQxNC0xLjUyOSAwLjQxNC0xLjY4IDAtMy4wNDItMS4zNzEtMy4wNDItMy4wNjJoLTMuMTQ1YzAuMDA0IDAuNTIyLTAuMTI2IDEuMDUxLTAuNDA2IDEuNTM1LTAuODM5IDEuNDU0LTIuNzA2IDEuOTQ4LTQuMTcgMS4xMDZsLTEuNTcyIDIuNzIzYzAuNDUzIDAuMjU3IDAuODQ1IDAuNjM0IDEuMTIzIDEuMTE3IDAuODM4IDEuNDUyIDAuMzM2IDMuMzExLTEuMTIgNC4xNmwxLjU3MiAyLjcyM2MwLjQ0OC0wLjI2MSAwLjk2Ny0wLjQxIDEuNTIyLTAuNDEgMS42NzUgMCAzLjAzMyAxLjM2MiAzLjA0MiAzLjA0NmgzLjE0NWMtMC4wMDEtMC41MTcgMC4xMjktMS4wNDAgMC40MDYtMS41MTkgMC44MzgtMS40NTIgMi43LTEuOTQ3IDQuMTYzLTEuMTFsMS41NzItMi43MjNjLTAuNDUtMC4yNTctMC44MzktMC42MzMtMS4xMTYtMS4xMTN6TTggMTEuMjRjLTEuNzg5IDAtMy4yNC0xLjQ1LTMuMjQtMy4yNHMxLjQ1LTMuMjQgMy4yNC0zLjI0YzEuNzg5IDAgMy4yNCAxLjQ1IDMuMjQgMy4yNHMtMS40NSAzLjI0LTMuMjQgMy4yNHoiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD4KPC9zdmc+Cg==) no-repeat}
.navbar li a{
    display:block;
    line-height:50px;
    padding-left:37px;
    padding-right:25px;
    vertical-align: middle;
    color:white}
.navbar:after,
.navbar:before{
  content:'';
  display:table}
.navbar:after {clear:both}

.submenu{display:none}
.navbar li:last-of-type:hover&gt;.submenu{
    display:block;
    position:absolute;
    left:0;
    background-color:#9B59B6}
.submenu li{display:block}
.submenu li a:before{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik0xMiAxMHYtMmgtNXYtMmg1di0ybDMgM3pNMTEgOXY0aC01djNsLTYtM3YtMTNoMTF2NWgtMXYtNGgtOGw0IDJ2OWg0di0zeiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPgo8L3N2Zz4K) no-repeat}


edit/note
This won't work well for mobile, so I suggest you work media queries into the nav and use jQuery or equivalent to handle the drop-down functionality.