Skip to content

Instantly share code, notes, and snippets.

@YidaChen

YidaChen/CSS-third-level-drop-down-menu.markdown

Created February 3, 2015 10:15
Show Gist options
  • Save YidaChen/96f29291d282a501b632 to your computer and use it in GitHub Desktop.
Save YidaChen/96f29291d282a501b632 to your computer and use it in GitHub Desktop.
Download ZIP
CSS third-level drop-down menu
Raw
index.html
<div id="nav">
<ul>
<li><a href="#">HTML</a>
</li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">less</a>
</li>
<li><a href="#">sass</a>
<ul>
<li><a href="#">less</a>
</li>
<li><a href="#">sass</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">AngularJS</a>
<ul>
<li><a href="#">AngularJS</a>
</li>
<li><a href="#">jQuery</a>
</li>
</ul>
</li>
<li><a href="#">jQuery</a>
</li>
</ul>
</li>
<li><a href="#">PHP</a>
</li>
<li><a href="#">Python</a>
</li>
</ul>
</div>
Raw
style.css
#nav {
width: 500px;
height: 40px;
background-color: #eee;
margin: 0 auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
position: relative;
}
a {
text-decoration: none;
color: #000;
display: block;
width: 100px;
line-height: 40px;
text-align: center;
}
a:hover {
color: #fff;
background: #666;
}
ul li ul {
position: absolute;
left: 0;
top: 40px;
display: none;
}
ul li:hover>ul {
display: block;
}
ul li ul li {
float : none;
background: #eee;
margin-top: 2px;
}
ul li ul li ul {
position: absolute;
top: 0px;
left: 100px;
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment