Skip to content

Instantly share code, notes, and snippets.

Created March 1, 2015 09:33
Show Gist options
  • Save anonymous/39a8c3c14778c23545ab to your computer and use it in GitHub Desktop.
Save anonymous/39a8c3c14778c23545ab to your computer and use it in GitHub Desktop.
dropdown menu simple pure css
<nav id="navid">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Tutorial</a>
<ul>
<li>
<a href="#">HTML</a>
<ul>
<li>
<a href="#">Dropdown menu</a>
<ul>
<li>
<a href="#">Simple</a>
<ul>
<li><a href="#">Pure css</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
#navid {
margin-top:15px;
}
#navid ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
}
#navid ul li {
position:relative;
float:left;
margin:0;
padding:0;
}
#navid ul li:hover {
background:#ddd;
}
#navid ul a {
display:block;
padding:0 5px;
}
#navid ul ul {
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
}
#navid ul li:hover > ul {
display:block;
}
#navid ul ul li {
width:150px;
}
#navid ul ul ul {
top:0;
left:100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment