简易的手风琴效果

 * {
      margin: 0;
      padding: 0;
    }
    ul {
      width: 600px;
      height: 400px;
      /* border: 1px solid #000; */
      margin: 50px auto;
    }
    li {
      width: 150px;
      height: 400px;
      float: left;
      list-style: none;
    }
    .li1 {
      background: red;
    }
    .li2 {
      background: green;
    }
    .li3 {
      background: blue;
    }
    .li4 {
      background: yellow;
    }
    
    ul:hover li {
      width: 50px;
    }
    ul li:hover {
      width: 450px;
    }

<ul>
    <li class="li1"></li>
    <li class="li2"></li>
    <li class="li3"></li>
    <li class="li4"></li>
  </ul>