<div class="menu">
  <ul class="flyout">
    <li class="flyout-label"><span>Login</span></li>
    <li class="flyout-content">
      <div class="form-line">
        <label>E-Mail</label>
        <input type="text" />
      </div>
      <div class="form-line">
        <label>Passwort</label>
        <input type="password" />
      </div>
      <div class="form-line">
        <input type="submit" value="Abschicken" />
      </div>
    </li>
</ul>
  
</div>

@import "compass/css3";

UL {
  list-style-type: none;
}

INPUT {
  background-color: #eeeeee;
  border: 0px solid red;
  &[type="text"],
  &[type="password"]{
    padding: 2px;
    font-size: 18px;
    line-height: 22px;
    box-shadow: 0 1px 3px #555555 inset;
  }
  &[type="submit"]{
    display: inline-block;
    padding: 4px 8px;
    background-color: #0aaf56;
    color: #ffffff;
    box-shadow: 1px 1px 2px #222222;
  }
}

.menu {
  background-color: #99bbff;
  color: #ffffff;
  font-family: sans-serif;
  height: 27px;
}

.flyout-label {
  float: right;
  SPAN {
    display: inline-block;
    padding: 4px 8px;
    background-color: #5588cc;
  }
}

.flyout-content {
  display: none;
  width: 212px;
  padding: 10px;
  border: 1px solid #999999;
  background-color: #ffffff;
  color: #333333;
  float: right;
  clear: right;
  
  .form-line {
    + .form-line {
      margin-top: 10px;
    }
  }
  
  LABEL {
    display: block;
    color:  #b5b5b5;
  }
  .flyout:hover & {
    display: block;
  }
}