CodePen

HTML

            
              <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

<div class="menu-navigation-container">
	<ul id="menu-navigation" class="menu"><li id="menu-item-213" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-213"><a href="http://www.happynakedpeople.co/">Home</a></li>
		<li id="menu-item-214" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-214"><a href="http://www.happynakedpeople.co/about/">About</a></li>
		<li id="menu-item-221" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-221"><a href="#">Projects</a>
		<ul class="sub-menu">
			<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219"><a href="http://www.happynakedpeople.co/feelgoodcandy/">Feel Good Candy</a></li>
			<li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218"><a href="http://www.happynakedpeople.co/leaflet/">Leaflet</a></li>
		</ul>
		</li>
		<li id="menu-item-220" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-220"><a href="http://www.happynakedpeople.co/forums/">Forums</a></li>
		<li id="menu-item-215" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-36 current_page_item menu-item-215"><a href="http://www.happynakedpeople.co/shop/">Shop</a></li>
		<li id="menu-item-216" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-216"><a href="http://www.happynakedpeople.co/contact/">Contact</a></li>
	</ul>
</div>

<div id="ribbon">
	<div id="ribbon-content"></div>
</div> <!-- end ribbon -->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /*
    MENU
*/

.menu-navigation-container {
	height: 40px;
	top: 19px;
	margin: 0 auto;
	text-transform: uppercase;
	font-weight: bold;
	position: relative;
	left: -50%;
	float: right;
	text-shadow: 0px 1px 0px #F173AC;
	font-family: 'Arvo', 'Chunk', serif;
}

.menu-navigation-container ul {
	list-style: none;
	margin: 0;
	padding: 0; /* need to zero both */
	position: relative;
	left: 50%;
	float: left;
}

.menu-navigation-container ul li {
	float: left;
	position: relative;
}

.menu-navigation-container ul li a {
	color: #7B0046;
	border-top: 0;
	display: block;
	text-align: center;
	position: relative;
	z-index: 2;
	padding: 10px 10px;
	text-decoration: none;
	overflow: hidden;
}

.menu-navigation-container ul li a:hover {
	color: #FFFEF2;
}

/*
	MENU DROPDOWN
*/

.menu-navigation-container ul li ul {
	width: 182px;
	display: none;
	position: absolute;
	top: 31px;
	left:-39px;
	z-index: 9999;   
	padding: 10px 0 0;
	background: #EC008C;
	-o-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}

.menu-navigation-container ul li ul li {
	background: url(images/dropdown.svg);
	background-position: top center;
	background-repeat: no-repeat;
	display: block;
	float: none;
	padding: 5px 10px !important;
}


.menu-navigation-container ul li ul a {
	text-decoration: none;
	height: auto;
	padding: 0;
	display: block;
}

.menu-navigation-container ul li:hover ul {
	display: block;
}

.menu-navigation-container ul li:hover ul li {
	display: block;
	margin: 0;
	padding: 5px 10px;
}

.menu-navigation-container ul li li {
	background: url(images/dropdown.svg);
	background-position: top center;
	background-repeat: no-repeat;
	display: block;
	float: none;
	padding: 5px 10px !important;
}

.menu-navigation-container ul li:hover li ul {
	display: none;
	position: absolute;
	top: -1px;
	left: 180px;
	z-index: 9999;
	margin: 0;
	padding: 0;
}

.menu-navigation-container ul li:hover li:hover ul {
	display: block;
}

.menu-navigation-container ul li li li {
	display: block;
}

/*
	MENU STYLES
*/

#navigation li a {
	color: #7B0046;
}

#navigation li a:hover {
	color: #FFFEF2;
}

.current-menu-item {
	color: #FFFEF2;
}

/*
	MENU RIBBON
*/

#ribbon {
	font-size: 16px !important;
	/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
	/*width: 50%;*/
	width: 928px;
	top: 18px;
	left: -16px;
	position: relative;
	background: #EC008C;
	color: #FFFFFF;
	text-align: center;
	padding: 20px 32px; /* Adjust to suit */ /*First integer controls height multiplied by two*/
	margin: 32px auto 48px; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
	text-transform: uppercase;
	font-weight: bold;
}

#ribbon:before, #ribbon:after {
	content: "";
	position: absolute;
	display: block;
	bottom: -16px;
	border: 20px solid #C40075; /*First integer controls height multiplied by two*/
	z-index: -1;
}

#ribbon:before {
	left: -28px;
	border-right-width: 24px;
	border-left-color: transparent;
}

#ribbon:after {
	right: -28px;
	border-left-width: 24px;
	border-right-color: transparent;
}

#ribbon #ribbon-content:before, #ribbon #ribbon-content:after {
	content: "";
	position: absolute;
	display: block;
	border-style: solid;
	border-color: #7B0046 transparent transparent transparent;
	top: 40px;
}

#ribbon #ribbon-content:before {
	left: 0px;
	border-width: 16px 0 0 16px;
}

#ribbon #ribbon-content:after {
	right: 0px;
	border-width: 16px 16px 0 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................