CodePen

HTML

            
              <div class="main-menu">
					<ul>
						<li><a href="#">Home</a></li>
						<li>
							<a href="#">Dropdown</a>
							<ul>
								<li><a href="#">Second tier menu item #1</a></li>
								<li>
									<a href="#">Second tier dropdown</a>
									<ul>
										<li><a href="#">Third tier #1</a></li>
										<li><a href="#">Third tier #2</a></li>
										<li><a href="#">Third tier #3</a></li>
										<li><a href="#">Third tier #4</a></li>
									</ul>
								</li>
								<li><a href="#">Second tier item #2</a></li>
							</ul>
						</li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Single Page</a></li>
						<li><a href="#">Single Post</a></li>
						<li><a href="#">Archive</a></li>
						<li><a href="#">404 page</a></li>
					</ul>
				</div> <!-- end of main-menu -->
            
          
!
via HTML Inspector

CSS

            
              
.main-menu a {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    color: #FA5858;
    text-decoration: none;
}

.main-menu ul {
    float: right;
    z-index: 999999;
    text-transform: uppercase;
}

.main-menu ul > li {
    display: inline;
    position: relative;
}

.main-menu ul > li > a {
    display: inline-block;
    font-size: 12px;
    height: 42px;
    line-height: 42px;
    margin-right: 1em;
    padding-right: 1em;
}

.main-menu ul > li a:hover {
    color: #81DAF5;
}

.main-menu ul > li a::before {
    position: absolute;

}

.main-menu ul > li ul {
    background: #FA5858;
    visibility: hidden;
    position: absolute;
    left: 0px;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.main-menu ul > li ul li {
    padding: 5px 10px;
    display: block;
    float: none;
    white-space: nowrap;
    position: relative;
     
}

.main-menu ul > li ul li a {
    color: #610B0B;
}

.main-menu ul > li ul li ul {
    background: #FA5858;
    visibility: hidden;
    position: absolute;
    left: 100%;
    top: 0px;

}


.main-menu ul > li:hover > ul {
    visibility: visible;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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