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<nav class=header>     <ul class=navigation>        <li><a href=#><img src=smiley.gif alt=logo height=50 width=80></a></li>        <li id=a class=><a href=#><span></span>A</a>        </li>        <li id=b class=><a href=#><span></span>B</a>        </li>        <li id=account class=right> <a href=/admin/profile><span></span>Test Test</a>            <ul class=dropdown>                <li><a href=/users/logout>Log out</a>                </li>            </ul>        </li>    </ul></nav>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 > ul {    display: block;    position: absolute;    background-color: #9B59B6;}.dropdown li {    display: block;}
Website Navigation Bar - Potential code soup
html;css
First, I'm not sold on your use of <nav> as a header. You can assign an aria role=banner to it or replace it with the tag intended to be a <header>. 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 requiredIf you're going to use a <span> 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<header class=header role=banner>  <a href=/>    <img src=logo.png>    <h1 class=visuallyhidden>Title</h1>  </a>  <nav class=navigation role=navigation>    <ul>      <li><a href=#>A</a></li>      <li><a href=#>B</a></li>      <li>         <a href=#>Test</a>         <ul>           <li><a href=#>Logout</a></li>         </ul>      </li>    </ul>  </nav></header>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>.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/noteThis 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. 