<nav id="navigation">
  <a href="#" class="logo">Studio<span>+<span></a>
  <ul class="links">
    <li><a href="#">About</a></li>
    <li class="dropdown"><a href="#" class="trigger-drop">Work<i class="arrow"></i></a>
      <ul class="drop">
        <li><a href="#">Art</a></li>
        <li><a href="#">Photography</a></li>
        <li><a href="#">Audio</a></li>
        <li><a href="#">Films</a></li>
      </ul>
    </li>
    <li class="dropdown"><a href="#" class="trigger-drop">Contact<i class="arrow"></i></a>
      <ul class="drop">
        <li><a href="#">Email</a></li>
        <li><a href="#">Phone</a></li>
      </ul>
    </li>
  </ul>
</nav>

$color-base:#fff;
$color-text:#222;
$color-accent: desaturate(navy,80%);

*{
  box-sizing:border-box;
}

body{
  background:$color-accent;
  color:$color-text;
  line-height:normal;
  font-size:16px;
  font-family:sans-serif;
}

a,a:hover{color:$color-accent; text-decoration : none; font-weight:600;}

nav{
  position:fixed;
  left:0;right:0;top:0;
  height:50px;
  background:$color-base;
  box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
  z-index:1000;
  min-width:580px;
  
  .logo{
    position:relative;
    float:left;
    height:50px;
    line-height:50px;
    padding:0 15px;
    font-size:22px;
    font-weight:900;
    text-transform:uppercase;
    span{
      display:inline-block;
      position:relative;
      top:-8px;
      font-size:13pt;      
    }
    
    &:hover{
      background:lighten($color-accent,40);
    }
  }
  
  .links{
    float:right;
    margin-right: 30px;    
    position:relative;
    
    li{
      float:left;
      list-style:none;
      position:relative;
      margin:10px;
      display:inline-block;      
      
      &>a{
        position:relative;
        display:inline-block;            
        padding:0 10px;
        line-height:30px;
        height:30px;        
        
        &:hover{
          color:$color-base;
          background:$color-accent;
          border-radius:2px;
        }
        
        &[class^="trigger-"]{padding-right:40px;}
        
        .arrow{
          position:absolute;
          width:10px;height:10px;   
          top:35%;
          text-align:center;          
          right:10px;
          border-width: 5px 5px 0 5px;
          border-style:solid;
          border-color: rgba(#000, .3) transparent;
          
          &:after{            
            content:"";
            border-left:1px solid rgba(#000,.15);
            top:-10px;left:-15px;
            position:absolute;            
            height:15px;    
          }
          
        }
        
      }
                
      ul{
          position:absolute;          
          left:0; 
          //top:40px;
          margin:0;
          background:$color-base;
          border-radius:2px;          
          box-shadow:0 0 5px rgba(#000, .15);
          display:none;
        
          >li{
            clear:both;            
            list-style:none;            
            display:block;
            padding:0 10px;
            margin:0;
            width:100%;            
            
            &:hover{
              background:lighten($color-accent,40);
              >a{
                background:lighten($color-accent,40);
                color:$color-base;
              }
            }
          }         
          
        }
      
      &:hover {
          > .drop{
            display:block;
            animation:fadeInRight .3s ease;
            -webkit-animation:fadeInRight .3s ease;
        }
      }
      
    }
  }
      
}

@keyframes fadeInRight{
    0%{
        opacity:0;
        transform:translate3d(100%,0,0)
    }
    100%{
        opacity:1;
        transform:none
    }
}