Skip to content

Instantly share code, notes, and snippets.

@brent-hoover

brent-hoover/unordered_nav.html

Created September 22, 2013 03:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save brent-hoover/6656355 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save brent-hoover/6656355 to your computer and use it in GitHub Desktop.
Download ZIP
Style unordered list as nav
Raw
unordered_nav.html
<html>
<style>
* {
margin: 0;
padding: 0;
}
nav {
margin: 50px;
}
ul {
overflow: auto;
list-style-type: none;
}
li {
height: 25px;
float: left;
margin-right: 0px;
border-right: 1px solid #aaa;
padding: 0 20px;
}
li:last-child {
border-right: none;
}
li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: #666;
}
li.active a {
font-weight: bold;
color: #333;
}
</style>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment