title: Bootstrap dropdown menu not visible
body: <p>I am trying to make a navbar with dropdowns using Bootstrap 4. When I click the dropdown link nothing happens. When I click the dropdown menu in chrome's dev tools it highlights the area where it should be, so it has expanded but is not visible. I followed the examples on w3schools closely, so I assume my css broke it. Can someone spot the problem?</p>
  
  <p>My code is below and I also made a <a href="https://jsfiddle.net/6ytwrsam/" rel="nofollow noreferrer">jsfiddle</a> reproducing the error. You can see the top of the menu but it doesn't show past the bottom of the div.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;my site&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="css/stylesheet.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container" id="main-container"&gt;
      &lt;div class="header row"&gt;
          &lt;h1 class="col-md-4"&gt;
              &lt;a href="#" title="Home page"&gt;
                  &lt;img src="images/logo.png" /&gt;
              &lt;/a&gt;
          &lt;/h1&gt;
          &lt;div class="col-md-8"&gt;
              &lt;nav class="navbar navbar-expand-sm"&gt;
                  &lt;ul class="navbar-nav"&gt;
                      &lt;li class="nav-item dropdown"&gt;
                          &lt;a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"&gt;Link 1&lt;/a&gt;
                          &lt;div class="dropdown-menu"&gt;
                              &lt;a class="dropdown-item" href="#"&gt;Link 1a&lt;/a&gt;
                              &lt;a class="dropdown-item" href="#"&gt;Link 1b&lt;/a&gt;
                              &lt;a class="dropdown-item" href="#"&gt;Link 1c&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Sass</p>
  
  <pre><code>body
      background-color: #ddd;
  
      #main-container
          background-color: #fff;
          margin-top: 10px;
          border-radius: 20px 20px 0 0;
  
  .header
      position: relative;
      margin: 0 10px 20px 10px;
      border-bottom: 3px solid #444;
  
      h1
          margin: 0;
  
  .navbar
      overflow: hidden;
      background-color: #333;
      font-family: Arial;
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 0;
      background-color: #fff;
  
  .navbar-expand-sm
      .navbar-nav
          .nav-link
              color: #444;
              text-align: centre;
              text-decotation: none;
              font-size: 17px;
              padding: 13px 16px 9px 16px;
              border-radius: 16px 16px 0 0;
  
              &amp;:hover
                  background-color: #444;
                  color: #e5e5e5;
  </code></pre>