Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

nav {
  background: #1888c7;
  padding: 5px;
  margin-bottom: 20px;
    ul {
      padding: 0;
      
      ul {
      display: none;
      position: absolute;/* awesome trick for dropdown to be in front of content. Giving me ideas for toggling the dropdown using jQuery as well.*/
      background: #1888c7;
      padding-top: 10px;/* Padding makes sure that the dropdown doesn't disappear because still inside the element, but if I use margin, then it disappears. */
      }
    }
}

/* Style Menu on Hover */
    li:hover ul {
      display: block;
    }
    li a:hover {
      display: block;
  }

/* Style Menu Li */
nav > ul > li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
  width: 100px;
}

    li {
      list-style: none;
    }

SassMeister-output.css

nav {
  background: #1888c7;
  padding: 5px;
  margin-bottom: 20px;
}

nav ul {
  padding: 0;
}

nav ul ul {
  display: none;
  position: absolute;
  /* awesome trick for dropdown to be in front of content. Giving me ideas for toggling the dropdown using jQuery as well.*/
  background: #1888c7;
  padding-top: 10px;
  /* Padding makes sure that the dropdown doesn't disappear because still inside the element, but if I use margin, then it disappears. */
}

/* Style Menu on Hover */
li:hover ul {
  display: block;
}

li a:hover {
  display: block;
}

/* Style Menu Li */
nav > ul > li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
  width: 100px;
}

li {
  list-style: none;
}

SassMeister-rendered.html

<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</nav>