Skip to content

Instantly share code, notes, and snippets.

@jessedhillon
Created January 7, 2015 04:08
Show Gist options
  • Save jessedhillon/934fba48df8d9b2fa317 to your computer and use it in GitHub Desktop.
Save jessedhillon/934fba48df8d9b2fa317 to your computer and use it in GitHub Desktop.
Submenu example
#menubar {
position: absolute;
top: 300px;
left: 300px;
width: 500px;
background: #aaa;
}
.menu {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu li {
position: relative;
display: inline-block;
vertical-align: top;
max-width: 120px;
padding: 8px;
}
.menu a, .menu a:visited {
color: #eaeacc;
}
.menu .menu {
position: absolute;
display: none;
left: 0;
background: #999;
max-width: 120px;
}
.menu li:hover .menu {
display: block;
}
.menu li:hover {
background: #999;
}
.menu .menu li:hover {
background: #777;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="menubar">
<ul class="menu">
<li>
<a href="#">Menu Item</a>
<ul class="menu">
<li>Submenu Item</li>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</li>
<li>
<a href="#">Menu Item</a>
<ul class="menu">
<li>Submenu Item</li>
<li>Submenu Item</li>
<li>Submenu Item</li>
</ul>
</li>
<li>
<a href="#">Menu Item</a>
<ul class="menu">
<li>Submenu Item</li>
<li>Submenu Item</li>
<li>Submenu Item</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