Dropdown

<div id="sidenav" class="sidenav native-color">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

    <a href="#">Overview</a>
    <a href="#">Users</a>
    <a href="#">Resources</a>
    <a href="#">Categories</a>
    <a href="#">Submissions</a>
    <a class="toggle-btn" href="#">Analytics</a>
    <ul>
        <li><a href="#">Views</a></li>
        <li><a href="#">Downloads</a></li>
    </ul>
    <a href="#">News</a>
    <a href="#">Settings</a>
    <a href="#">
        Go to Dashboard
    </a>
</div>

<script>
    $('#sidenav a.toggle-btn').click(function (e) {
        e.preventDefault();
        $(this).toggleClass('open');
    });
</script>

<style>
    .sidenav a.toggle-btn:before,
    .sidenav a.toggle-btn:after
    {
        font-family: FontAwesome;
        font-size: 0.5em;
        /*color: black;*/
        /*background-color: white;*/
        margin-left: 10px;
        /*border-radius: 50%;*/
    }
    .sidenav a.toggle-btn:after{
        content: "\f054";
        padding: 3px 5px;
    }
    .sidenav a.open.toggle-btn:after{
        content: "\f078";
        padding: 3px;
    }
    .sidenav a + ul{
        list-style: none;
        display: none;
        transition: display .5s;
    }
    .sidenav a.open + ul{
        display: block;
    }
    .sidenav a + ul a{
        font-size: 1.3em;
        padding: 8px
    }


    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
    }
</style>