Sample Dropdown Menu

by Erik Bartlow

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<div style="background-color:#FFF;max-width: 250px;min-height: 200px; border: 1px solid #ccc;">
    <ul>
        <li><a href="#" id="btnProjectList">
			<i class="fa fa-building"></i>
			 Projects List</a></li>
        <li><a href="#" id="btnIssueList">
			<i class="fa fa-bullhorn"></i>
			 Issues List</a></li>
        <li class="divider"></li>
        <li>
            <a href="#" id="btnCharts">
				Chart Options
				<i class="fa fa-caret-down"></i>
			</a>
        </li>
        <li class="divider"></li>
		<li>
			<a href="#" id="btnSave">
				<i class="fa fa-save"></i>
				Save Dashboard
			</a>
		</li>
    </ul>
</div>
<div style="background-color:#FFF;max-width: 250px;min-height: 200px; border: 1px solid #ccc;position:absolute;top: 75px;left: 125px;display:none;">
    <ul>
        <li>
            <a href="#" id="btnchart1">
			<i class="fa fa-chart-pie"></i>
                Projects By Status</a>
        </li>
        <li>
            <a href="#" id="btnchart2">
			<i class="fa fa-chart-bar"></i>
                Projects By Funding Type</a>
        </li>
        <li>
            <a href="#" id="btnchart3">
			<i class="fa fa-chart-area"></i>
                Projects By Region</a>
        </li>
		<li class="divider"></li>
		        <li>
            <a href="#" id="btnchart4">
			<i class="fa fa-chart-pie"></i>
                Issues By Type</a>
        </li>
        <li>
            <a href="#" id="btnchart5">
			<i class="fa fa-chart-area"></i>
                Issues By Status</a>
        </li>
        <li>
            <a href="#"...

CSS

body{
	margin: 20px;
}
ul {
    list-style: none;
    font-size: 14px;
}

li:first-of-type {
    margin-top: 10px;
}

li a {
    color: #5e5e5e;
    position: relative;
    left: -20px;
}

li a i {
    margin-right: 10px;
}

.divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}