W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/6/w3.css">
<body>

<div class="w3-sidebar w3-bar-block w3-teal" style="width:160px;top:0;left:0">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Tutorials ▾</button>
    <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">HTML</a>
    <a href="#" class="w3-bar-item w3-button">CSS</a>
    <a href="#" class="w3-bar-item w3-button">JavaScript</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">How To</a>
</div>

<main class="w3-container" style="margin-left:160px">
  <h2>Sidebar Dropdown</h2>
  <p>Combine <b>w3-sidebar</b> and <b>w3-bar-block</b> to create a fixed vertical navigation area.</p>
  <p>Place a <b>w3-dropdown-hover</b> container inside it to add a dropdown.</p>
  <p>Move the pointer over Tutorials in the sidebar, or use Tab to focus the button and move through the links.</p>
  <p>The content area has a left margin equal to the sidebar's width.</p>
  <p>The dropdown panel overlays the following sidebar item when it opens.</p>
</main>

</body>
</html>