Skip to content

Instantly share code, notes, and snippets.

@adaam2
Created June 27, 2014 10:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adaam2/09ff8f058b7a09c6a1a8 to your computer and use it in GitHub Desktop.
Save adaam2/09ff8f058b7a09c6a1a8 to your computer and use it in GitHub Desktop.
div.wrap {
display:table;
width:100%;
}
ul {
list-style:none;
display:table-row;
}
li {
display:table-cell;
width:auto;
white-space:nowrap;
border:1px solid #e2e2e2;
background:#fff;
padding:1em;
}
ul li > ul {
display:none;
}
ul li.dd {
position:relative;
}
ul li.dd:hover > ul {
display:block;
position:absolute;
height:100px;
}
ul li.dd:hover > ul li {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="dd"><a href="#dd">Four</a>
<ul id="dd">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment