Generated by SassMeister.com.

SassMeister-input-HTML.html

<header id="header">
    <div class="section clearfix">
      <a href="/" title="Home" rel="home" id="logo">
        <img src="http://mollerrothe.com.dev.fkly.dk/sites/all/themes/moellerrothe/logo.png" alt="Home">
      </a>
      <div id="block-system-main-menu" class="block block-system block-menu">
        <ul class="menu">
          <li class="first expanded active-trail">
            <a href="/contact" title="" class="active-trail active">Om os</a>
            <ul class="menu">
              <li class="first leaf"><a href="/contact" title="" class="active">Medabejdere</a></li>
              <li class="last leaf active-trail"><a href="/contact" title="" class="active-trail active">Kontakt</a></li>
            </ul>
          </li>
          <li class="leaf"><a href="/cases" title="">Cases</a></li>
          <li class="leaf"><a href="/produkter" title="">Produkter</a></li>
          <li class="leaf"><a href="/brands" title="">Brands</a></li>
          <li class="last leaf"><a href="/contact" title="" >Social</a></li>
        </ul>  
      </div>
    </div>
  </header>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin reset {
  *, :before, :after { box-sizing: border-box; margin:0; padding:0; }
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
	  display: block;
  }   
}
@mixin color-scheme { 
  body { background:#000;}
  a    { color: white; }
}
@mixin typography {
  p { font: 16px/1.3 Arial, sans-serif; }
  //....
  a { 
    font: 16px sans-serif; 
    color: white; // Maybe move to theme mixin
  }
}


// --------------------------------------------------
// COMPONENTS (BEM'ish style)
// --------------------------------------------------

//
// Navigation logo
//
@mixin navigation__logo {
  display: inline-block; // Addapt to content size
  padding: 30px;         // Largen click zone 
  float: left;           // Float to move menu up   
  margin-right: -100%;   // Isolate 
  @content;              // Chainability
}

//
// Navigation list (expected ul)
//
@mixin navigation__list {
  font-size: 0;       // Prevent inline-block space (overridden by typography)
  text-align: right;  // Position right
  @content;           // Chainability
}

//
// Nested navigation list (expected li > ul)
//
@mixin navigation__list-nested {
  transition: all 0.5s; // Show/hide animation 
  position: absolute;   // Position absolute to break out of parent item  
  max-height: 0;        // We can't animate variable height so we use max-height
  overflow: hidden;     // Hide content
  @content;             // chainability
}

// Expected on parent element hover    
@mixin navigation__list-nested--visible {
  max-height: 200px; // Set max-height to a number close to the expected height  
  @content;          // Chainability
}

// Navigation list item (expected li)
@mixin navigation__list__item {
  position: relative;    // Make content position relative to item   
  display: inline-block; // Addapt to content size 
  @content;              // Chainability
}
// Navigation list item in nested list (expected li > ul > li)
@mixin navigation__list-nested__item {
  text-align:left; // Counter navigation list alignment
  @content;        // Chainability
}

// Navigation link (expected ul > li > a)
@mixin navigation__list__item__link {
  position: relative;     // Make content position relative to item (e.g. :before and :after)
  display: inline-block;  // Addapt to content size 
  padding: 10px;          // Largen click zone
  @content;               // Chainability
}
@mixin navigation__list__item__link--active {
  color: gold;  // Theming - maybe move to theme or typography
  @content;     // Chainability
}







// --------------------------------------------------
// ASSEMBLY (when we know the markup)
// --------------------------------------------------

// --------------------------------------------------
// CSS Reset
// --------------------------------------------------
@include reset;


// --------------------------------------------------
// Color Scheme (too simple not to be copied)
// --------------------------------------------------
@include color-scheme;


// --------------------------------------------------
// Global typography
// --------------------------------------------------
@include typography;


// --------------------------------------------------
// Navigation 
// --------------------------------------------------


[id="logo"] {  // Use attribute selector to style on id
  @include navigation__logo; 
}


.block-menu > ul {   // We can't use .menu as it is added to nested ul's aswell
  // -------------------------
  // Main navigation
  // -------------------------
  @include navigation__list;
  > li {@include navigation__list__item; }
  a  { @include navigation__list__item__link; }
  a.active-trail { @include navigation__list__item__link--active; }
  // -------------------------
  // Sub navigation (chained) 
  // -------------------------
  .menu { 
    @include navigation__list-nested {
      li { @include navigation__list-nested__item; }
    }
  }
  > li:hover .menu { // Drop down on hover
    @include navigation__list-nested--visible;  
  }
}

SassMeister-output.css

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  background: #000;
}

a {
  color: white;
}

p {
  font: 16px/1.3 Arial, sans-serif;
}

a {
  font: 16px sans-serif;
  color: white;
}

[id="logo"] {
  display: inline-block;
  padding: 30px;
  float: left;
  margin-right: -100%;
}

.block-menu > ul {
  font-size: 0;
  text-align: right;
}
.block-menu > ul > li {
  position: relative;
  display: inline-block;
}
.block-menu > ul a {
  position: relative;
  display: inline-block;
  padding: 10px;
}
.block-menu > ul a.active-trail {
  color: gold;
}
.block-menu > ul .menu {
  transition: all 0.5s;
  position: absolute;
  max-height: 0;
  overflow: hidden;
}
.block-menu > ul .menu li {
  text-align: left;
}
.block-menu > ul > li:hover .menu {
  max-height: 200px;
}

SassMeister-rendered.html

<header id="header">
    <div class="section clearfix">
      <a href="/" title="Home" rel="home" id="logo">
        <img src="http://mollerrothe.com.dev.fkly.dk/sites/all/themes/moellerrothe/logo.png" alt="Home">
      </a>
      <div id="block-system-main-menu" class="block block-system block-menu">
        <ul class="menu">
          <li class="first expanded active-trail">
            <a href="/contact" title="" class="active-trail active">Om os</a>
            <ul class="menu">
              <li class="first leaf"><a href="/contact" title="" class="active">Medabejdere</a></li>
              <li class="last leaf active-trail"><a href="/contact" title="" class="active-trail active">Kontakt</a></li>
            </ul>
          </li>
          <li class="leaf"><a href="/cases" title="">Cases</a></li>
          <li class="leaf"><a href="/produkter" title="">Produkter</a></li>
          <li class="leaf"><a href="/brands" title="">Brands</a></li>
          <li class="last leaf"><a href="/contact" title="" >Social</a></li>
        </ul>  
      </div>
    </div>
  </header>