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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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
Loading ..................

Console