SOURCE

<div class="wrap">
  <span class='select'>outside <i>[</i></span>
  <ul>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
  </ul>
</div>

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}



ul {
  margin: 0 10px;
}

.wrap {
  width: 100px;
  background: #ccc;
  &:hover {
    ul {
      display: block;
    }
    .select i {
      transform: rotateX(180deg);
    }
  }
  ul {
    display: none;
  }
  .select {
    display: block;
    padding: 5px 10px;
    border: 1px solid #fff;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    i {
       transition: all 0.5s;
    }
  }
}