CodePen

HTML

            
              <div class="page-wrap">
  	<div class="grid">
			<div class="col-1-3">
				<div class="module">
					<ul class="title">
						<li>Food
							<ul>
								<li><a href="#">Item 1</a></li>
								<li><a href="#">Item 2</a></li>
							</ul>
						</li>
					</ul> <!-- /title -->
				</div>
			</div>
		</div>
	</div>
            
          
!
via HTML Inspector

CSS

            
              /*
 * Grid
 */

.page-wrap {
  width: 80%;
	margin: 0 auto;
}

.grid {
	overflow: hidden;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.module {
	padding: 20px;
}

[class*='col-'] {
	float: left;
}

div.col-1-3 {
	width: 33.33%;
	overflow: visible;
}

ul.title a {
    display: block;
    color: #fff;
    font-family: Verdana;
    font-size: 14px;
    text-decoration: none;
}

ul.title li, ul.title ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #fff;
    background: #555;
    color: #fff;
}

ul.title {
    position: relative;
    z-index: 597;
    float: left;
}

ul.title li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
    padding: 5px 10px;
}

ul.title li.hover,ul.title li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
    background: #1e7c9a;
}

ul.title ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 90;
    width: 195px;
    background: #555;
    border: 1px solid #fff;
}

ul.title ul li {
    float: none;
}

ul.title ul ul {
    top: -2px;
    left: 100%;
}

ul.title 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 ..................