**Debugging:**

When running your code in Firefox, I get the following error:

> TypeError: Argument 1 of Window.getComputedStyle does not implement
> interface Element.

This is because `button.nextSibling()` is a text node. Use `nextElementSibling()` instead.

**Suggestions:**

 - I recommend attaching an "active" class to the dropdown itself instead of its content. The semantics are clearer and it provides you with more flexibility. E.g. you could style an active toggle button differently.

 - Also, instead of querying the computed `display` style (slow!) of the button in order to infer whether a dropdown is active or inactive via

        if (getComputedStyle(this.nextSibling).display === 'none') {
          ...
        }

  you could simply check for the dropdown's "active" class via

        if (dropdown.classList.contains('.active') {
          ...
        } 

  which is faster and agnostic to the specific CSS properties of an "active" dropdown button.

 - Additionally, instead of relying on a fixed order of dropdown toggle button and dropdown content by querying for the dropdown button first and then getting the content via `nextSibling()` or `nextElementSibling()`, I recommend querying for the `dropdown` first and then separately querying its children for a `dropdown-toggle` and the `dropdown-content`.

 - Finally, I recommend simplifying the deeply nested structure of your code by moving the reusable deeply nested code into  a `toggleDropdown` function.

**Style:**

While some people consider the following idiomatic:

    [].forEach.call(document.querySelectorAll('...'), function(element) {
      ...
    });

I prefer using the simpler for ... of iteration:

    for (let element of document.querySelectorAll('...')) {
      ...
    }

Assigning the query results to a variable with a self-documenting name might improve readability: 

    let elements = document.querySelectorAll('...');
    for (let element of elements) {
      ...
    }

**Enhancements:**

You might want to listen to the "blur" event and deactivate the dropdown when its focus is transferred to an outside element.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function toggleDropdown(dropdown) {
      if (dropdown.classList.contains('active')) {
        dropdown.classList.remove('active');
      } else {
        let activeDropdowns = document.querySelectorAll('.dropdown.active');
        for (let activeDropdown of activeDropdowns) {
          activeDropdown.classList.remove('active');
        }
        dropdown.classList.add('active');
      }
    }

    let dropdowns = document.querySelectorAll('.dropdown');
    for (let dropdown of dropdowns) {
      
      // Toggle when dropdown toggle clicked:
      let toggle = dropdown.querySelector('.dropdown-toggle');
      toggle.addEventListener('click', function() {
        toggleDropdown(dropdown);
      });
      
      // Deactivate when focus leaves dropdown:
      dropdown.addEventListener('blur', function(event) {
        if (!dropdown.contains(event.relatedTarget)) {
          dropdown.classList.remove('active')
        }
      }, true);
    }

<!-- language: lang-css -->

    .dropdown {
      display: inline-block;
    }

    .dropdown .dropdown-toggle {
      background-color: #fff;
      border: 0;
      color: #424242;
      cursor: pointer;
      padding: 5px 0 5px 0;
    }

    .dropdown .dropdown-content {
      display: none;
    }

    .dropdown.active .dropdown-content {
      margin-top: 5px;
      display: block;
      background-color: #fff;
      border: 1px solid #eee;
      box-shadow: 0 0 2px 1px #dcdcdc;
      position: absolute;
      border-radius: 3px;
      z-index: 10;
    }

    .dropdown .dropdown-content a {
      display: block;
      width: 100%;
      text-decoration: none;
      color: #3d3d3d;
      padding: 4px;
      box-sizing: border-box;
      font-size: 0.9em;
    }

    .dropdown .dropdown-content a:hover {
      background-color: #f0f0f0;
    }

    .dropdown.menu1,
    .dropdown.menu2 {
      margin: 0 0 0 20px;
    }

    .dropdown.menu1 .dropdown-toggle {
      border-bottom: 2px solid #00BCD4;
    }

    .dropdown.menu2 .dropdown-toggle {
      border-bottom: 2px solid #4CAF50;
    }

    .dropdown.menu3 .dropdown-toggle {
      border-bottom: 2px solid #9FA8DA;
    }

<!-- language: lang-html -->

    <div class="dropdown menu1">
        <button class="dropdown-toggle">Menu 1</button>
        <div class="dropdown-content">
            <a href="#">Option 1</a>
            <a href="#">Option 2</a>
        </div>
     </div>
    <div class="dropdown menu2">
        <button class="dropdown-toggle">Menu 2</button>
        <div class="dropdown-content">
            <a href="#">Option 1</a>
        </div>
    </div>
    <div class="dropdown menu3">
        <button class="dropdown-toggle">Menu 3</button>
        <div class="dropdown-content">
            <a href="#">Option 1</a>
            <a href="#">Option 2</a>
            <a href="#">Option 3</a>
        </div>
    </div>

<!-- end snippet -->