octocatstartv

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
via CSS Lint

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
via JS Hint

Code Indentation

     

Save Automatically?

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

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <ul id="nav" class="use-trans">
<li>
	<a href="#">Voluptate Atque</a>

		<div class="submenu">
			<ul>
				<li><a href="#">Quo voluptas nulla pariatur?<span></span></a></li>
				<li><a href="#">Dignissimos Ducimus<span></span></a></li>
				<li><a href="#">Qui blanditiis<span></span></a></li>
			</ul>
		
			<div class="padding"></div>
			<div class="shadow"></div>
		</div>
	</li>


	<li>
		<a href="#">Corrupti Quos Dolores</a>
	
		<div class="submenu">
			<ul>
				<li><a href="#">Qui Dolorem<span></span></a></li>
				<li><a href="#">Ipsum Quia<span></span></a></li>
				<li><a href="#">Dolor Sit<span></span></a></li>
				<li><a href="#">Tempore<span></span></a></li>
				<li><a href="#">Qui Ratione<span></span></a></li>
				<li>
					<a href="#">Amet, nam libero! &nbsp;&nbsp;&nbsp;&raquo;<span></span></a>

					<div class="submenu">
						<ul>
							<li><a href="#">Qui Dolorem<span></span></a></li>
							<li><a href="#">Ipsum Quia<span></span></a></li>
							<li><a href="#">Dolor Sit<span></span></a></li>
							<li><a href="#">Qui Dolorem<span></span></a></li>
							<li><a href="#">Ipsum Quia<span></span></a></li>
							<li><a href="#">Dolor Sit<span></span></a></li>
							<li><a href="#">Qui Dolorem<span></span></a></li>
							<li><a href="#">Ipsum Quia<span></span></a></li>
							<li><a href="#">Dolor Sit<span></span></a></li>
							<li>
								<a href="#">Amet, nam libero! Libero, libero, LIBERO!! &nbsp;&nbsp;&nbsp;&raquo;<span></span></a>
							
								<div class="submenu">
										<ul>
											<li><a href="#">Dude, what the fuck is "Libero"?<span></span></a></li>
											<li><a href="#">Ipsum Quia<span></span></a></li>
											<li><a href="#">Dolor Sit<span></span></a></li>
											<li><a href="#">Qui Dolorem<span></span></a></li>
											<li><a href="#">Ipsum Quia<span></span></a></li>
											<li><a href="#">Dolor Sit<span></span></a></li>
										</ul>

										<div class="padding"></div>
										<div class="shadow"></div>
										<div class="buffer"></div>
								</div>

							</li>
							<li><a href="#">Tempore<span></span></a></li>
							<li><a href="#">Qui Ratione<span></span></a></li>
						</ul>
					
						<div class="padding"></div>
						<div class="shadow"></div>
						<div class="buffer"></div>
					</div>

				</li>
			</ul>

			<div class="padding"></div>
			<div class="shadow"></div>
		</div>
	</li>


	<li>
		<a href="#">Et Quas Molestias<span></span></a>
		<div class="submenu">
			<ul>
				<li><a href="#">Voluptatem sequi nesciunt<span></span></a></li>
				<li><a href="#">Dicta sunt explicabo.<span></span></a></li>
				<li><a href="#">Sed Quia Non<span></span></a></li>
				<li><a href="#">Numquam Eius<span></span></a></li>
				<li><a href="#">Modi cum soluta<span></span></a></li>
				<li><a href="#">Nobis est<span></span></a></li>
			</ul>
		
			<div class="padding"></div>
			<div class="shadow"></div>
		</div>
	</li>


	<li>
		<a href="#">Iste natus error sit voluptatem.</a>
		<div class="submenu">
			<ul>
				<li><a href="#">Eligendi Optio<span></span></a></li>
				<li><a href="#">Atque Corrupti<span></span></a></li>
				<li><a href="#">Quos Dolores<span></span></a></li>
				<li><a href="#">Quas Molestias.<span></span></a></li>
				<li><a href="#">Libero Tempore<span></span></a></li>
				<li><a href="#">Dignissimos Ducimus<span></span></a></li>
			</ul>
		
			<div class="padding"></div>
			<div class="shadow"></div>
		</div>
	</li>
</ul>


<!-- The following segment of code isn't necessary for the nav-menu: it just provides a control for revealing the hidden CSS boundaries to the user. Just for the sake of easier visualisation. -->
<div id="controls" style="margin: 3em 5em 0 0; float: right; position: fixed; bottom: .3em; right: .3em">
	<form action="./" method="get" id="controls-form">
		<fieldset style="background-color: #000; border: 1px solid #666; color: #fff;">
			<label for="toggle-class" style="font-weight: bold; padding: .5em 1em; display: block; cursor: pointer;">Show Boundaries (S): <input type="checkbox" id="toggle-class" name="toggle-class" value="true" style="cursor: pointer" /></label>
		</fieldset>
	</form>
</div>
            
          
!

CSS

            
              /* Minor style rules for presentational purposes */
body{
	font: 75% Arial, Helvetica, sans-serif;
	background-color: #444;
	width: 1024px;
	margin: 1em auto 0px;
}

a:link{
	text-decoration: none;
}


/* Actual navmenu CSS */
#nav{
	background: #111 repeat-x top left;
	height: 37px;
}

#nav, #nav li{
	display: block;
	list-style: none;
	position: relative;
	z-index: 82;
}
	#nav > li{
		float: left;
		z-index: 82;
	}
		#nav > li:hover{
			background: #222 repeat-x top left;
		}
	
		#nav a{
			display: block;
			line-height: 37px;
			padding: 0 0.5em;
			z-index: 82;
			position: relative;
			color: #ccc;
		}
			#nav a:hover{
				color: #fff;
			}
	
		/* Subnav Menu */
		#nav .submenu{
			display: none;
			position: absolute;
			z-index: 80;
			background: repeat-x left top #353535;
			border: 1px solid #000;
		
			left: 0px;
			top: 37px;
			min-width: 100%;
		
			-o-box-shadow:		2px 2px 3px #000;
			-icab-box-shadow:	2px 2px 3px #000;
			-khtml-box-shadow:	2px 2px 3px #000;
			-moz-box-shadow:	2px 2px 3px #000;
			-webkit-box-shadow:	2px 2px 3px #000;
			box-shadow:			2px 2px 3px #000;
		}
			#nav .submenu li{
				display: block;
				line-height: 27px !important;
			}
				#nav .submenu li:hover{
					background: #444 repeat-x top left;
				}
			
				#nav .submenu a{
					display: block;
					line-height: 27px !important;
					white-space: nowrap;
				}
			
				#nav > li:hover .submenu{
					display: block;
				}
					/* Hide next level of subnavigation */
					#nav > li:hover > .submenu .submenu{
						display: none;
					}


				#nav .padding{
					display: block;
					position: absolute;
					z-index: 78;
				
					width: 100%;
					height: 100%;
				
					top: 0px;
					left: 0px;
					background: none !important;
				}
					/* Padding amount for first-level dropdown */
					#nav > li > .submenu > .padding{
						width: 160%;
						left: -30%;
						height: 140%;
					}
			
				#nav .buffer{
					display: block;
					position: absolute;
					bottom: 0px;
					right: 100%;
				
					width: 100%;
					height: 100%;
					background: none !important;
				}
			
				#nav .shadow{
					display: none !important;
				}
	
		/*	Third-level Subnavigation */
			#nav .submenu .submenu{
				position: absolute;
				left: 100%;
				top: -1px;
			}
				#nav .submenu .submenu .padding{
					width: 150%;
					top: -35%;
					height: 170%;
				}
				/*	Show subnavigation */
				#nav > li:hover .submenu li:hover > .submenu{
					display: block;
					z-index: 70 !important;
				}
	



		/* CSS3 Transition Handling */
		#nav.use-trans li > .submenu{
			opacity: 0;
			display: block !important;
			left: -9999px !important;
		
			-moz-transition:		0.2s opacity ease-in, 0s left linear 0.22s;
			-webkit-transition:		0.2s opacity ease-in, 0s left linear 0.22s;
			-khtml-transition:		0.2s opacity ease-in, 0s left linear 0.22s;
			-icab-transition:		0.2s opacity ease-in, 0s left linear 0.22s;
			-ms-transition:			0.2s opacity ease-in, 0s left linear 0.22s;
			-o-transition:			0.2s opacity ease-in, 0s left linear 0.22s;
			transition:				0.2s opacity ease-in, 0s left linear 0.22s;
		}
			/* Hide next level of subnavigation */
			#nav.use-trans > li:hover > .submenu .submenu{
				display: block !important;
				left: -9999px !important;
			}

		
			/* Hover */
			#nav.use-trans > li:hover > .submenu,
			#nav.use-trans > li > .submenu li:hover > .submenu{
				opacity: 1 !important;
			
				-moz-transition-delay:		0s;
				-webkit-transition-delay:	0s;
				-khtml-transition-delay:	0s;
				-icab-transition-delay:		0s;
				-ms-transition-delay:		0s;
				-o-transition-delay:		0s;
				transition-delay:			0s;
			}
				#nav.use-trans > li:hover > .submenu				{	left: 0px !important;	}
				#nav.use-trans > li > .submenu li:hover > .submenu	{	left: 100% !important;	}


		/*	Running Border on Subnavigation
		-	Stable implementation requires an additional span tag at the end of each anchor tag.
		*/
		#nav ul a{
			position: relative;
		}
			#nav ul a span{
				background-color: #5a5a5a;
				position: absolute;
				bottom: 0px;
				left: 0px;
				height: 1px;
				width: 100%;
			}



		/*	Outlining Rules for Debugging */
		.padding	{	outline-color: red;		}
		.buffer		{	outline-color: blue;	}
	
		.showbounds .padding,
		.showbounds .buffer{
			outline-style: solid;
			outline-width: 1px;
		}



/* Theming can go here */
#nav{
	outline: 1px solid #111;
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #282828));
	background: -webkit-linear-gradient(#404040, #282828);
	background: -moz-linear-gradient(#404040, #282828);
	background: -o-linear-gradient(#404040, #282828);
	background: linear-gradient(#404040, #282828);
}
	#nav > li{
	border-left: 1px solid #333;
	border-right: 1px solid #222;
	}
	#nav > li:first-child{
		border-left: 0 !important;
	}

	#nav > li:hover{
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1a1a1a), color-stop(100%, #282828));
	background: -webkit-linear-gradient(#141414, #282828);
	background: -moz-linear-gradient(#141414, #282828);
	background: -o-linear-gradient(#141414, #282828);
	background: linear-gradient(#141414, #282828);
	}

	#nav .submenu li{
		background-image: -webkit-linear-gradient(#292929, #242424);
	}
            
          
!

JS

            
              /**
 * jQuery.support.cssProperty
 * To verify that a CSS property is supported (or any of its browser-specific implementations)
 *
 * @param string p - css property name
 * [@param] bool rp - optional, if set to true, the css property name will be returned, instead of a boolean support indicator
 *
 * @Author: Axel Jack Fuchs (Cologne, Germany)
 * @Date: 08-29-2010 18:43
 *
 * Example: $.support.cssProperty('boxShadow');
 * Returns: true
 *
 * Example: $.support.cssProperty('boxShadow', true);
 * Returns: 'MozBoxShadow' (On Firefox4 beta4)
 * Returns: 'WebkitBoxShadow' (On Safari 5)
 */
$.support.cssProperty = (function() {
function cssProperty(p, rp) {
	var b = document.body || document.documentElement,
	s = b.style;

	// No css support detected
	if(typeof s == 'undefined') { return false; }

	// Tests for standard prop
	if(typeof s[p] == 'string') { return rp ? p : true; }

	//	Tests for vendor specific prop
	v	=	['Moz', 'Webkit', 'Khtml', 'O', 'Ms'],
	p	=	p.charAt(0).toUpperCase() + p.substr(1);
	for(var i=0; i<v.length; i++) {
		if(typeof s[v[i] + p] == 'string') { return rp ? (v[i] + p) : true; }
	}
}

return cssProperty;
})();




jQuery(document).ready(function(){

	//	Check for CSS3 Transition support. If running an older browser, add the menu transitions manually.
	if(!$.support.cssProperty("transition")){
		$("#nav").removeClass("use-trans");
		$("#nav li").each(function(){
			var obj			=	$(this);
			var submenu		=	obj.children(".submenu");
			if(submenu.length > 0)	obj
				.mouseenter(function(){	$(this).children(".submenu").fadeIn(200);	})
				.mouseleave(function(){	$(this).children(".submenu").fadeOut(200);	})
				submenu.hide();
		});
	}



	//	Following is simply a listener that allows the user to toggle the outlined regions for easier visualisation of what's happening in the CSS
	var toggle	=	$("#toggle-class");
	if(toggle.hasClass("hidden")) return;
	showBounds(toggle[0].checked);

	function showBounds(value){
		return ((typeof(value) == "boolean") ? value : value[0].checked) ?
			$("body").addClass("showbounds")	:
			$("body").removeClass("showbounds");
	}

	toggle.change(function(e){showBounds(this.checked);});

	$(window).keydown(function(e){
		if(e.keyCode == 83){ // "S"
			toggle[0].checked	=	!(toggle[0].checked);
			showBounds(toggle);
		}
	});
});
            
          
!
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