Responsive Nav

responsive-nav.css

/* Adapted from http://bostonglobe.com */

nav ul {display:table; width:100%; border:solid 1px #ddd; border-collapse:collapse; margin:0 0 30px; padding:0; background:whiteSmoke;}
nav ul li {display:table-cell; text-align:center; margin:0;}
nav ul li a {display:block; padding:10px 0; text-decoration:none;}
nav ul li a:hover {background:#333; color:#eee;}
/* fixes for IE7 :( 
   widths have to be set to percentage of number of items based on total width 
	formula: ((totalwidth/# of items)*100)/totalwidth = li width %
	example: ((960/4)*100)/960 = 25%
*/
nav ul li {*float:left; *display:inline-block; *width:25%; }

responsive-nav.html

<nav role="navigation">
    <ul>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/portfolio/">Portfolio</a></li>
        <li><a href="/thesetup">The Setup</a></li>
        <li><a href="/about/contact">Contact</a></li>
    </ul>
</nav>