hucklesby/dabblet.css

## dabblet.css
/**
 * No-float menu bar
 */

html, body {
  background: lightyellow;
  margin: 0;
  min-height:100%;
}

h1 {
  margin: 1em 5%;
}

/* visually hidden */
.structural {
  left: -100%;
  position:absolute;
}

/* for all your navigation, perhaps */
.nav ul {
  margin: 0;
  padding: 0;
}

/* text-align positions menu items left, right, or center */
.nav-bar {
  background: lightgrey;
  border: solid grey;
  border-width: 1px 0;
  padding: .5em 5%;
  text-align: left;
}

.nav-bar li {
  display: inline;
}

.nav-bar li * {
  border: 1px dotted;
  border-radius: 6px;
  display: inline-block;
  font-weight: bold;
  margin-right: .25em;
  padding: .5em 1em;
  text-decoration: none;
}

.nav-bar a:link,
.nav-bar a:visited {
  background: transparent;
  color: black;
}

.nav-bar b,
.nav-bar a:hover,
.nav-bar a:focus {
  background: whitesmoke;
  border-style: solid;
  color: mediumblue;
}

.nav-bar a:active {
  position: relative;
  top: 2px;
}


## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<div class="header">
  <h1>No-float Menu Bar</h1>
  <div class="nav nav-bar">
    <h2 class="structural">Main Navigation</h2>
		<!-- dummy links go nowhere -->
    <ul>
      <li><a href="#index.html">Home</a></li>

      <li><b title="You are here!">About Us</b></li>

      <li><a href="#join.html">Sign Up</a></li>

      <li><a href="#archive.html">Archives</a></li>

      <li><a href="#contact.html">Contact</a></li>
    </ul>
  </div>
</div>


## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* No-float menu bar
	*/

	html, body {
	background: lightyellow;
	margin: 0;
	min-height:100%;
	}

	h1 {
	margin: 1em 5%;
	}

	/* visually hidden */
	.structural {
	left: -100%;
	position:absolute;
	}

	/* for all your navigation, perhaps */
	.nav ul {
	margin: 0;
	padding: 0;
	}

	/* text-align positions menu items left, right, or center */
	.nav-bar {
	background: lightgrey;
	border: solid grey;
	border-width: 1px 0;
	padding: .5em 5%;
	text-align: left;
	}

	.nav-bar li {
	display: inline;
	}

	.nav-bar li * {
	border: 1px dotted;
	border-radius: 6px;
	display: inline-block;
	font-weight: bold;
	margin-right: .25em;
	padding: .5em 1em;
	text-decoration: none;
	}

	.nav-bar a:link,
	.nav-bar a:visited {
	background: transparent;
	color: black;
	}

	.nav-bar b,
	.nav-bar a:hover,
	.nav-bar a:focus {
	background: whitesmoke;
	border-style: solid;
	color: mediumblue;
	}

	.nav-bar a:active {
	position: relative;
	top: 2px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<div class="header">
	<h1>No-float Menu Bar</h1>
	<div class="nav nav-bar">
	<h2 class="structural">Main Navigation</h2>
	<!-- dummy links go nowhere -->
	<ul>
	<li><a href="#index.html">Home</a></li>

	<li><b title="You are here!">About Us</b></li>

	<li><a href="#join.html">Sign Up</a></li>

	<li><a href="#archive.html">Archives</a></li>

	<li><a href="#contact.html">Contact</a></li>
	</ul>
	</div>
	</div>