CodePen

HTML

            
              <nav>
<div class="topnav">
<ul>

    <li><a href="#">First</a>	 
      <ul>
						
			<li><a href="#">Lorem Ipsum</a></li>
			<li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
			
			</ul> 
  </li>
		<li><a href="#">Second</a>																				  	 
			<ul>
						
			<li><a href="#">Lorem Ipsum</a></li>
			<li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
			
			</ul>
		
		</li>
		<li><a href="#">Third</a>
			<ul>
						
			<li><a href="#">Lorem Ipsum</a></li>
			<li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
			
			</ul>
      </li>
  
  
		<li><a href="#">Lorem</a>	  	 </li>
		<li><a href="#">Ipsum</a>	  	 </li>
		<li><a href="#">etc</a>
     <ul>
						
			<li><a href="#">Lorem Ipsum</a></li>
			<li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
			
			</ul> 
    </li>

</ul>


</div>
</nav>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              nav {
  
  .topnav {
	height: 40px;
	width: 950px;
	font-size: 0;
	font-weight: 600;
	overflow: hidden;
	
		ul {
			padding: 0px;
			li {
				display: inline-block;
				padding: 11px 10px;
				border-right: 1px solid #D4D0D0;
				height: 40px;
				
				&:hover {
					ul {display: block;}
				}
				ul {
				position: absolute;
				display: none;
				width: auto;
				background-color: #b6aca8;
				top: 25;
				z-index: 9999;
          
					    li {
					    border: none;
					    a {
						    color: white;
					    }
				    }
				}
			}
		}
		
		
	} /* topnav end */
	a {
	color: #878483;
	font-size: 15px;
	height: 40px;
	   &:hover {
		   color: #525252;
		   
	   }				   
	}
}	

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

JS

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