Skip to content

Instantly share code, notes, and snippets.

@F1LT3R
Created November 6, 2014 17:56
Show Gist options
  • Select an option

  • Save F1LT3R/4cceb06e944f1ff147e4 to your computer and use it in GitHub Desktop.

Select an option

Save F1LT3R/4cceb06e944f1ff147e4 to your computer and use it in GitHub Desktop.
Using CSS Only to create a UO LI Nav menu that fills 100% of the page width.
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(http://fonts.googleapis.com/css?family=Sigmar+One|Monofett);
body{
background:#aaa;
}
main{
width:960px;
margin: 0 auto;
border: 1px solid black;
background: #fff;
}
header{
background:#08a;
width: 100%;
}
header h1{
font-family:Sigmar One;
margin:0;
font-size:32pt;
font-weight: normal;
padding:0ch .5ch;
}
nav ul {
padding-left:0;
background:rgba(0,0,0,.25);
margin:0;
display:table;
border-spacing:2px 0;
width:100%;
text-align:center;
}
nav ul li{
display:table-cell;
}
nav ul li a{
font-family:Open Sans;
padding:8px 0px;
background:#000;
color:white;
width:100%;
display:block;
font-size: 16px;
font-weight: bold;
}
nav ul li a:hover,nav ul li a:focus{
background:#8A0;
}
article{
padding:20px;
}
</style>
<body>
<main>
<header>
<h1>COOLSITE BRO!</h1>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
</header>
<article>
<h1>Cool article bro!</h1>
<p>Yeah this rocks.</p>
</article>
</main>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment