CodePen

HTML

            
              <div id="creative">
	<div class="navdrop">
		<ul>
			<li class="current">
				<a href="creative.html"><span class="head">CREATIVE</span></a>
				<ul id="dropnava_c" style="display:block;">
					<li class="current"><a href="print.html"><span class="subnav">PRINT</span></a></li>
					<li><span class="subnav">BRANDING</span></li>
					<li><span class="subnav">ONLINE</span></li>
					<li><span class="subnav">VIDEO</span></li>
				</ul>
			</li>
		</ul> 
	</div> <!--end navdrop-->   
</div><!--end creative-->

            
          
!
via HTML Inspector

CSS

            
              #creative {
  background: red;
}

.navdrop ul {
	width: 200px;
	margin: 5px 0px 0px 20px; /* adjusts left margin to bring menu to where you want it */
	padding: 0;
	color: #fff;
	font-weight: bold;
	list-style-type: none;
	text-decoration: none;
	background-color: transparent;
}

.navdrop ul li {
	/*display: block;*/ /*This makes the navigations horizontal*/
	font-size: 20px;
	font-stretch:extra-expanded;
	line-height: 22px;
	list-style-type: none;
	text-decoration:non;
	padding: 0;
	margin: 0;
	color: #fff;
	opacity: 0.5;
	filter:alpha (opactiy=50);/*for IE8 and earlier*/
	background-color: transparent;
}

.navdrop ul li:hover {
	color: #fff;
	text-decoration: none;
	opacity: 1.0;
	filter:alpha (opactiy=100); /*for IE8 and earlier*/
	background-color: transparent;
}

.navdrop ul li a {
	color: #fff;
	text-decoration: none;
	background-color: transparent;
}

/*.navdrop a:hover {
	/*color: #fff;
	text-decoration: none;
	background: transparent;
	background-color: transparent;
}*/


.navdrop ul li.current {
	/*color: #fff;*/
	/*opacity: 1.0;
	filter:alpha (opactiy=100);*/ /*for IE8 and earlier*/
	text-decoration: none;
	background-color: transparent;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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