Website Navigation Bar - Potential code soup

Question

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;
}

• unor: I don’t know if it’s just a placeholder, but the alt value "logo" is probably not appropriate.
• darcher: At first glance, semantically speaking <nav> isn't a header, in this context you could assign role=banner but may want to change that to a <header> tag. What browser support are you after?

Answer 1

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 required

If 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/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.