Skip to content

Instantly share code, notes, and snippets.

@dantz
Created April 9, 2013 08:52
Show Gist options
  • Save dantz/5344148 to your computer and use it in GitHub Desktop.
Save dantz/5344148 to your computer and use it in GitHub Desktop.
Untitled
body {
border-top: 8px solid #009de0;
margin: 0;
}
header {
margin: -8px 0 0 0;
background-color: #eee;
min-height: 200px;
}
header > div {
width: 60%;
margin: 0 auto
}
nav {
width: 100%;
display: table;
}
ul {
display: table-cell;
list-style: none;
margin: 0;
padding: 0;
width: 10%
}
li {
display: table-cell;
}
.fill {
border-top: 8px solid #009de0;
display: table-cell;
}
a {
transition: all 500ms ease-in-out;
}
a:link, a:visited {
display: block;
border-top: 8px solid #009de0;
padding: 4em 0.3em 0 0.3em;
text-decoration: none;
white-space: nowrap;
color: #000;
}
a:hover, a:focus {
border-top: 8px solid transparent;
border-bottom: 8px solid #009de0;
}
.active a:link, .active a:visited {
border-top: 0px solid transparent;
margin-top: 8px;
border-bottom: 8px solid #009de0;
}
<header><div>
<nav>
<ul>
<li><a href="/">Menu 1</a></li>
<li class="active"><a href="/">Menu 2</a></li>
<li><a href="/">Menu 3</a></li>
</ul>
<span class="fill"></span>
</nav>
</div></header>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment