100% navigation with display:table

dabblet.css

/**
 * 100% navigation with display:table
 */

body {
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 87.50%;
	background: #ddd;
}

.ym-wrapper {
	min-width: 480px;
	max-width: 960px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.ym-wbox {
	min-height: 300px;
	padding: 10px;
}


#nav ul {
	display: table;
	table-layout: fixed; /* all table cells (here LI elements) got the same width */
	width: 100%;
	margin: 0;
	padding: 0;
}
#nav ul li {
	display: table-cell;
	margin: 0;
	list-style-type: none;
	border: 1px solid #ccc;
	border-right: 0;
	border-top: 0;
}
#nav ul li:first-child { border-left: 0; }
#nav ul li a {
	display: block;
	line-height: 3em;
	padding: 0 1em;
	color: red;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
#nav ul li a:hover {
	text-decoration: underline;
	box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
}

p { line-height: 1.5em; }
code {
	display: inline-block;
	padding: 0 5px;
	color: #1E6FE8;
	font-size: 125%;
	background-color: #efefef;
}
code:hover { background: #ccc }
*::selection { background: #A7E8B4; }

dabblet.html

<div class="ym-wrapper">
	<nav id="nav" role="navigation">
		<ul>
			<li><a href="#">First Button</a></li>
			<li><a href="#">The Second Button</a></li>
			<li><a href="#">Another Button</a></li>
			<li><a href="#">Button No. 4</a></li>
			<li><a href="#">And The Last One</a></li>
		</ul>
	</nav>
	<div class="ym-wbox">
		<h1>Display table and table-cell for menus</h1>
		<p>Navigation with <code>ul { display: table }</code> and <code>li { display: table-cell }</code>.</p>
		<p>With <code>ul { table-layout: fixed }</code> every table cell (here the list elements) will get the same width.</p>
	</div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}