Navbar

This is a super simple navbar that you can style any way you like. Any sub-unorderd list (ul) will be expanded into a dropdown menu! Here's what it looks like:

Here's the html:

<nav>
<ul>
    <li><a href="#item1">Item 1</a></li>
    <li><a href="#item2">Item 2 (hover me!)</a>
        <ul>
        <li><a href="#sub1">Sub Item 1</a></li>
        <li><a href="#sub2">Sub Item 2</a></li>
        </ul>
    </li>
    <li><a href="#item3">Item 3</a></li>
    <li><a href="#item4">Item 4</a></li>
</ul>
</nav>

This is the minimum style required to keep the navbar functional:

<style>
nav li {
   display: inline-block; /* list-items in a nav are displayed on a single line*/
   position: relative;
}
nav li ul {
   display: none;       /* sublists under a nav li are hidden */
   position: absolute;
   width: 100px;
   top: 100%;
   padding: 0;
}
nav li:hover > ul {  /* if a nav li is hovered, then display any sublists */
   display: block;
}
nav a {
}
</style>