Skip to content

Instantly share code, notes, and snippets.

@dottedsquirrel

dottedsquirrel/index.html

Created April 13, 2020 10:28
Show Gist options
  • Save dottedsquirrel/0c840c9dd8640a78eb81d062895cd301 to your computer and use it in GitHub Desktop.
Save dottedsquirrel/0c840c9dd8640a78eb81d062895cd301 to your computer and use it in GitHub Desktop.
Download ZIP
The Ultimate Drop Down Tutorial // source https://jsbin.com/zaxohuv
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>The Ultimate Drop Down Tutorial</title>
<style id="jsbin-css">
/* Text styling */
h1, h2, h3, h4, h5, h6, p, li { font-family: Arial; }
/* The Simple Menu */
.simple ul{ background:#0d47a1; padding:0; }
.simple li{
display:inline-block;
min-width:100px;
z-index:999;
}
.simple a{
text-decoration:none;
display:block;
color:white;
padding:15px;
transition:0.2s all linear;
}
.simple a:hover{
background:#e3f2fd;
color:black;
transition:0.2s all linear;
}
/* dropdown */
.dropdown ul{ position:relative; }
.dropdown li > ul {
background:#1565c0;
display:none;
position:absolute;
z-index:1999;
}
.dropdown li > ul li{ display:block; }
.dropdown li:hover > ul{
display:block;
}
/* multi */
.multi li { position: relative; }
.multi ul ul ul {
background:green;
position:absolute;
left:100%;
top:0;
}
/* all three parts compiled into a single class */
.nav ul {
background:#0d47a1;
padding:0;
}
.nav li {
width:100px;
position: relative;
display:inline-block;
}
.nav a{
text-decoration:none;
display:block;
color:white;
padding:15px;
transition:0.2s all linear;
}
.nav a:hover{
background:#e3f2fd;
color:black;
transition:0.2s all linear;
}
.nav li > ul {
background:#1565c0;
display:none;
position:absolute;
}
.nav li > ul li{ display:block; }
.nav li:hover > ul{
display:block;
}
.nav ul ul ul {
background:green;
position:absolute;
left:100%;
top:0;
}
</style>
</head>
<body>
<h2>The simple Menu</h2>
<div class="simple">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<h2>With single level dropdown</h2>
<div class="simple dropdown">
<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<h2>With multi-level dropdown</h2>
<div class="simple dropdown multi">
<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li>
<a href="#">Sub Item</a>
<ul>
<li><a href="#">2nd lvl sub item</a></li>
<li><a href="#">2nd lvl sub item</a></li>
<li><a href="#">2nd lvl sub item</a>
<ul>
<li><a href="#">3nd lvl sub item</a></li>
<li><a href="#">3nd lvl sub item</a></li>
<li><a href="#">3nd lvl sub item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<h2>Multi-level dropdown as a single class</h2>
<div class="nav">
<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li>
<a href="#">Sub Item</a>
<ul>
<li><a href="#">2nd lvl sub item</a></li>
<li><a href="#">2nd lvl sub item</a></li>
<li><a href="#">2nd lvl sub item</a>
<ul>
<li><a href="#">3nd lvl sub item</a></li>
<li><a href="#">3nd lvl sub item</a></li>
<li><a href="#">3nd lvl sub item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<script id="jsbin-source-css" type="text/css">/* Text styling */
h1, h2, h3, h4, h5, h6, p, li { font-family: Arial; }
/* The Simple Menu */
.simple ul{ background:#0d47a1; padding:0; }
.simple li{
display:inline-block;
min-width:100px;
z-index:999;
}
.simple a{
text-decoration:none;
display:block;
color:white;
padding:15px;
transition:0.2s all linear;
}
.simple a:hover{
background:#e3f2fd;
color:black;
transition:0.2s all linear;
}
/* dropdown */
.dropdown ul{ position:relative; }
.dropdown li > ul {
background:#1565c0;
display:none;
position:absolute;
z-index:1999;
}
.dropdown li > ul li{ display:block; }
.dropdown li:hover > ul{
display:block;
}
/* multi */
.multi li { position: relative; }
.multi ul ul ul {
background:green;
position:absolute;
left:100%;
top:0;
}
/* all three parts compiled into a single class */
.nav ul {
background:#0d47a1;
padding:0;
}
.nav li {
width:100px;
position: relative;
display:inline-block;
}
.nav a{
text-decoration:none;
display:block;
color:white;
padding:15px;
transition:0.2s all linear;
}
.nav a:hover{
background:#e3f2fd;
color:black;
transition:0.2s all linear;
}
.nav li > ul {
background:#1565c0;
display:none;
position:absolute;
}
.nav li > ul li{ display:block; }
.nav li:hover > ul{
display:block;
}
.nav ul ul ul {
background:green;
position:absolute;
left:100%;
top:0;
}
</script>
</body>
</html>
Raw
jsbin.zaxohuv.css
/* Text styling */
h1, h2, h3, h4, h5, h6, p, li { font-family: Arial; }
/* The Simple Menu */
.simple ul{ background:#0d47a1; padding:0; }
.simple li{
display:inline-block;
min-width:100px;
z-index:999;
}
.simple a{
text-decoration:none;
display:block;
color:white;
padding:15px;
transition:0.2s all linear;
}
.simple a:hover{
background:#e3f2fd;
color:black;
transition:0.2s all linear;
}
/* dropdown */
.dropdown ul{ position:relative; }
.dropdown li > ul {
background:#1565c0;
display:none;
position:absolute;
z-index:1999;
}
.dropdown li > ul li{ display:block; }
.dropdown li:hover > ul{
display:block;
}
/* multi */
.multi li { position: relative; }
.multi ul ul ul {
background:green;
position:absolute;
left:100%;
top:0;
}
/* all three parts compiled into a single class */
.nav ul {
background:#0d47a1;
padding:0;
}
.nav li {
width:100px;
position: relative;
display:inline-block;
}
.nav a{
text-decoration:none;
display:block;
color:white;
padding:15px;
transition:0.2s all linear;
}
.nav a:hover{
background:#e3f2fd;
color:black;
transition:0.2s all linear;
}
.nav li > ul {
background:#1565c0;
display:none;
position:absolute;
}
.nav li > ul li{ display:block; }
.nav li:hover > ul{
display:block;
}
.nav ul ul ul {
background:green;
position:absolute;
left:100%;
top:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment