W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<button class="w3-bar-item w3-button w3-left-align" onclick="toggleMenu(this, 'demoAcc')">
    Accordion <i class="fa fa-caret-down"></i>
  </button>

<div class="w3-dropdown-click">
    <button class="w3-bar-item w3-button w3-left-align" onclick="toggleMenu(this, 'demoDrop')">
    Dropdown <i class="fa fa-caret-down"></i>
    </button>
    <div id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
      <a href="javascript:void(0)" class="w3-bar-item w3-button">Link</a>
      <a href="javascript:void(0)" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>

<div class="w3-container" style="margin-left:160px">
<h2>Sidebar Accordion</h2>
<p>In this example, an accordion and a dropdown menu are placed inside the side navigation.</p>
<p>Click both to see how they differ. The accordion pushes the content below it down, while the dropdown appears over the content.</p>
</div>

</body>
</html>