cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="page">
<ul>
  <li><a href="#">BIG</a></li>
  <li class="active"><a href="#">WHITE</a></li>
  <li><a href="#">DUCK</a></li>
	<li><a href="#">HOVER</a></li>
	<li><a href="#">MENU</a></li>
	<li><a href="#">DEMONOSTRATION</a></li>
</ul>
<img  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/256994/pandora.jpg"/>
<p>
	Wayfarers organic jean shorts Banksy. Narwhal normcore four dollar toast, single-origin coffee taxidermy cornhole meh authentic quinoa health goth cray sartorial kitsch. Leggings DIY hoodie twee wolf. Drinking vinegar American Apparel chambray Carles cornhole. Hashtag American Apparel mumblecore roof party church-key direct trade. Sustainable tilde scenester whatever brunch Austin. Before they sold out cliche Portland cardigan butcher, four loko Kickstarter Neutra Wes Anderson.

Typewriter gluten-free pug tousled, polaroid 3 wolf moon roof party master cleanse sartorial PBR&B wayfarers. Church-key heirloom semiotics cronut cold-pressed pour-over. Craft beer four loko distillery meggings paleo. Try-hard sartorial direct trade meggings scenester, kitsch Blue Bottle food truck swag ugh VHS bespoke iPhone organic. Vegan direct trade fanny pack, street art before they sold out tofu +1 bitters pickled iPhone gastropub Bushwick gentrify kale chips blog. Put a bird on it Vice pickled keffiyeh cardigan Godard. Street art pug keytar skateboard polaroid asymmetrical heirloom, iPhone bespoke.

Flexitarian Tumblr Brooklyn tilde, skateboard whatever High Life Kickstarter chia meggings health goth normcore mustache Helvetica craft beer. Brooklyn PBR pork belly Intelligentsia chambray, ugh sustainable +1. Viral literally High Life seitan, flexitarian put a bird on it lomo vegan Carles. Kogi before they sold out selfies farm-to-table, trust fund Shoreditch locavore keffiyeh irony Pinterest authentic. Tumblr cronut authentic sriracha ethical. Typewriter Williamsburg tilde lumbersexual kale chips. Polaroid craft beer fixie, single-origin coffee kitsch taxidermy 3 wolf moon Carles sartorial artisan disrupt.

Chia master cleanse crucifix, vinyl kale chips taxidermy cornhole cold-pressed quinoa irony direct trade mustache Godard. Yr forage gastropub, butcher umami Godard Bushwick try-hard ennui retro Vice meh American Apparel craft beer. Kickstarter craft beer post-ironic semiotics skateboard quinoa. Cray drinking vinegar iPhone crucifix, heirloom fixie salvia hella pug Pinterest kogi vinyl single-origin coffee Shoreditch. Vice post-ironic ugh Echo Park chillwave, Blue Bottle salvia squid lomo organic photo booth. Tattooed synth sriracha, plaid Intelligentsia four dollar toast distillery actually street art. Banjo +1 letterpress lomo sriracha.
	</p>
<div>
            
          
!
            
              /*THE ul IS OUR MENU ITEMS AREA SO WE WILL GIVE IT A LIGHT GREY BACKGROUND*/
ul { 
	position:fixed;
  margin: 0;  
  background:rgba(0,0,0,0.7);
  display: block;
  width: 100%;
  text-align: center;

}
li { 
  display: inline-block;
  padding: 20px 5px;
}
a {
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
  display: inline-block;
  position: relative;
/*	THE PADDING HERE GIVES US THE SPACE TO THE UNDERLINE*/
	padding-bottom:4px;
}
a:after {    
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
	/*START AT THE MIDDLE SO WE CAN ANIMATE LEFT*/
  left: 50%;
  position: absolute;
	/* THIS IS OUR HOVER UNDERLINE COLOR */
  background: #0093d0;
  transition: width 0.35s ease 0s, left 0.35s ease 0s;
	/*ZERO WIDTH UNTIL HOVERED*/
  width: 0;
}
/*NOTE HOW WE MAKE THE li THE HOVER TARGET AN NOT THE a link SO THAT HOVER IS ACTIVATED IN THE VICINITY OF AND NOT JUST DIRECTLY OVER THE TEXT*/
li:hover a::after { 
  width: 100%; 
  left: 0; 
}


/*THIS IS THE ACTIVE ITEM*/
li.active>a:after {    
/*	LETS HAVE A WHITE LINE UNDER THE ACTIVE ITEM JUST TO LOOK NICE*/
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  background: #fff;
  width: 100%;
}

/* Ignore this CSS it is just for the demo page */
body,html {
  margin: 0;
	padding:0;
  font: bold 12px/1.4 'Open Sans', arial, sans-serif;
  background: #ccc;
}
@media screen and (min-width:878px){
	body,html{
		font-size:17px;
	}
	li{
		padding:20px 10px;
	}
}
#page{
	width:100%;
	background:white;
	height: 100%;
	margin: 0 auto;
	padding:0;
}
#page>img{
	max-width:100%;
height: auto;
}
p{
	max-width:600px;
	margin:0 auto;
	padding-top:40px;
	line-height:1.7
}


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console