Okay!
There's a lot of things going on in your header navigation:
- You have <li> and <a> backwards... The <li> should contain the <a>
- Use sprites for your background images. That means, combine your background images into one large image and use CSS to change the background position.
- Actually, it appears that you can use plain text and the same orange/hover background for all the links
- The HTML can be simplified
You have this:
HTML Code:
<div id="nav">
<ul>
<li id="navl"></li>
<a href="http://www.newdevnation.com/index.php"><li id="home"></li></a>
<a href="http://www.newdevnation.com/category/articles"><li id="articles"></li></a>
<a href="http://www.newdevnation.com/category/htmlcss"><li id="htmlcss"></li></a>
<a href="http://www.newdevnation.com/category/wordpress"><li id="wordpress"></li></a>
<a href="http://www.newdevnation.com/category/phpmysql"><li id="phpmysql"></li></a>
<a href="http://www.newdevnation.com/downloads"><li id="downloads"></li></a>
<a href="http://www.newdevnation.com/contact-us"><li id="contact"></li></a>
<li id="navr"></li>
</ul>
</div>
This would be better:
HTML Code:
<ul id="nav">
<li><a href="http://www.newdevnation.com/index.php" id="home"></a></li>
<li><a href="http://www.newdevnation.com/category/articles" id="articles"></a></li>
<li><a href="http://www.newdevnation.com/category/htmlcss" id="htmlcss"></a></li>
<li><a href="http://www.newdevnation.com/category/wordpress" id="wordpress"></a></li>
<li><a href="http://www.newdevnation.com/category/phpmysql" id="phpmysql"></a></li>
<li><a href="http://www.newdevnation.com/downloads" id="downloads"></a></li>
<li><a href="http://www.newdevnation.com/contact-us" id="contact"></a></li>
<li id="navr"></li>
</ul>
In the CSS you'd do this:
- #nav { display:block; }
- #nav li { list-style-type:none;display:inline; }
- #nav a { display:block; }
You may have originally had the <li><a></a></li> structure, and reversed it to <a><li></li></a> because you couldn't get the links to be a certain width and height. That's because <a> elements aren't displayed using the box model and won't respond to a { width:100px; } until you add the "display:block;" to the CSS. Anyways, this element order change is important.
I see 40+ images requests! It appears 15 or so images are header backgrounds; these can actually be combined to one large CSS sprite. Or better yet, since the image text appears to be just a standard (Arial?) font you can even use plain text and a single orange background. This will eliminate that :hover blank effect you're seeing when the :hover background loads. It'll also make the page load much faster!
If you made a single background and had the plain white text... you could simplify the HTML further:
HTML Code:
<ul id="nav">
<li><a href="http://www.newdevnation.com/index.php">Home</a></li>
<li><a href="http://www.newdevnation.com/category/articles">Articles</a></li>
<li><a href="http://www.newdevnation.com/category/htmlcss">HTML & CSS</a></li>
<li><a href="http://www.newdevnation.com/category/wordpress">WordPress</a></li>
<li><a href="http://www.newdevnation.com/category/phpmysql">PHP / MySQL</a></li>
<li><a href="http://www.newdevnation.com/downloads">Downloads</a></li>
<li><a href="http://www.newdevnation.com/contact-us">Contact</a></li>
<li id="navr"></li>
</ul>
This last one is the best solution because search engines can read the link text
! Since all your header links are { height:80px;width:130px; } and could use the same background CSS... you wouldn't need individual #id's on the elements.
That should be enough to get you rolling for now
If you have questions, let me know!