<div class="phone">
  <div class="frame">
    <button class="button">메뉴열기</button>
   
    <div class="msg">
      마우스를 올려주세요
    </div>
    
    <nav class="nav">
      <ul>
        <li><a href="">처음으로</a></li>
        <li>
          <a href="">회원가입</a>
          <ul class="sub">
            <li><a href="">로그인</a></li>
            <li><a href="">이용약관</a></li>
          </ul>   
        </li>
        <li>
          <a href="">로그인</a>
          <ul class="sub">
            <li><a href="">페이스북로그인</a></li>
            <li><a href="">트위터로그인</a></li>
          </ul> 
        </li>
        <li><a href="">회사소개</a></li>
      </ul>
    </nav>
  </div>
</div>

.phone {
 padding: 10px 0; 
}

.frame {
  width: 320px;
  height: 640px;
  border:5px solid #333;
  margin: 0 auto;
  position: relative;
  
  &:hover {
    .nav {
      left: 5%;
    }
    .msg {
      left: -100%;
    }
  }
}

.button {
  width: 90%;
  display: block;
  padding: 10px 0;
  margin: 10px auto;
  font-size: 20px;
  text-align: center;
  border:0;
  background: #fa5252;
  color:#fff;
  cursor:pointer;
  border-radius: 3px;
  &:hover {
    background: #c92a2a;
  }
}


.msg {
  position: absolute;
  top: 65px;
  left: 5%;
  width: 90%;
  background: #12b886;
  color:#fff;
  font-size: 13px;
  text-align: center;
  padding: 10px 0;
  border-radius: 50em;
  animation: upAndDown 2s infinite ease;
  &:before {
    position: absolute;
    top:-5px;
    left: 50%;
    margin-left: -5px;
    content:"";
    width: 0; 
    height: 0;     
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #12b886;
  }
}

.nav {
  position: absolute;
  top: 70px;
  width: 90%;
  // left: 5%;
  left:-100%;
  background: #91a7ff;
  
  > ul {
    padding: 0;
    margin: 0;
    
    > li {
      list-style:none;
      padding: 0;
      margin: 0;
      > a {
        display: block;
        text-align: center;
        padding: 15px 0;
        text-decoration:none;
        color:#fff;
        border-bottom: 1px solid #fff;
        &:hover {
          background: #3bc9db;
          letter-spacing:4px;
        }
      }
      
      .sub {
        padding: 0;
        margin: 0;
        overflow: hidden;
        max-height: 0;
        > li {
          list-style:none;
          padding: 0;
          margin: 0;
          > a {
            display: block;
            width: 50%;
            float: left;
            text-align: center;
            padding: 10px 0;
            font-size: 13px;
            background: #4263eb;
            color:#fff;
            text-decoration:none;
            &:hover {
              background: #364fc7;
            }
          }
        }
      }
      
      &:hover {
        .sub {
          max-height:100px;
        }
      }
    }
  }
}

.msg,
.nav,
.button,
.nav * {
  transition: all .3s;
}

@keyframes upAndDown {
    0% {
      transform:translate(0,0);
      opacity: 1;
    }
    50% {
      transform:translate(0,5px);
      opacity: .7;
    }
    0% {
      transform:translate(0,0);  
      opacity: 1;
    }
}