<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
<ul class="main-navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Front End Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Resets</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Frameworks</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">WordPress Development</a>
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Custom Post Types</a>
<ul>
<li><a href="#">Portfolios</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</li>
<li><a href="#">Options</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
</ul>
<h2>How it works</h2><hr />
<pre>
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
</pre>
<p>Using relative positioning for the parent li allows it to be used as a container for absolutely positioned child elements.</p>
<hr />
<pre>
li ul {
display: none;
}
</pre>
<p>This hides the dropdown menus until hovering over a parent li.</p>
<hr />
<pre>
li:hover > ul {
display: block;
position: absolute;
}
</pre>
<p>This displays the dropdown ul when hovering over a parent li, using <code>li:hover ul</code> for the selector without the <code>></code> child combinator selector will work for single level dropdowns.</p>
<hr />
<pre>
ul ul ul {
left: 100%;
top: 0;
}
</pre>
<p>Poisitions the second level dropdowns to the right of the first level dropdown.</p>
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/* This hides the dropdowns */
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #2c3e50;
}
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
/* Remove float from dropdown lists */
li:hover li {
float: none;
}
li:hover a {
background: #1bc2a2;
}
li:hover li a:hover {
background: #2c3e50;
}
.main-navigation li ul li {
border-top: 0;
}
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after {
clear: both;
}
