Extreme navigation experiment

dabblet.css

/**
 * Extreme navigation experiment
 */

.cnt{ max-width:500px; width:100%; margin: 70px auto 0; }
nav ul{ 
	list-style:none; 
	background-color:#eee; 
	padding: 10px;
	font-size:0;

}
nav li { 
	display:inline-block; 
	max-width: 100px; 
	text-align:center; 
	padding: 0 10px; 
	background-color:#ddd; 
	vertical-align:middle;
	margin:10px 10px;
	//padding-left:10px;
	//margin-right:10px;
}
.nav-block{ display:table; }
.nav-text{ 
	display:table-cell; 
	vertical-align:middle; 
	font-size:16px;
}
.spacer{ display:inline-block; color:white; vertical-align:middle; font-size:16px; }
//<div class="nav-block">

dabblet.html

<div class="cnt">
	<nav class="main-menu">
		<ul>
			<li><span class="nav-text">Home</span></li>
			<span class="spacer">|</span>
			<li><span class="nav-text">About our great company</span></li>
			<span class="spacer">|</span>
			<li><span class="nav-text">Analysing our Products</span></li>
			<span class="spacer">|</span>
			<li><span class="nav-text">Contact us</span></li>
		</ul>
	</nav>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}