Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
ul {
 box-shadow: 1px 1px 3px #555;
 margin:50px auto;
 padding: 0px;
 width: 120px;
 transition: all .2s ease-in, transform 1.8s ease-in-out;
 text-align: center;
}

ul:hover {
 box-shadow: 2px 4px 3px #555;
 cursor: pointer;
 background: lightblue;
 color: brown;
 transform: rotate(360deg) scale(1.2);

}
li {
  box-sizing: border-box;
  width: 100%;
  list-style: none;
  padding: 10px 10px;
  background:#fff;
 background: transparent;

}

li:not(:last-child){
  border-bottom: 1px solid #111;
}
</style>
</head>
<body>

<ul>
<li>First</li>
<li>Second</li>
<li>Last</li>
</ul>


<script id="jsbin-source-css" type="text/css">ul {
 box-shadow: 1px 1px 3px #555;
 margin:50px auto;
 padding: 0px;
 width: 120px;
 transition: all .2s ease-in, transform 1.8s ease-in-out;
 text-align: center;
}

ul:hover {
 box-shadow: 2px 4px 3px #555;
 cursor: pointer;
 background: lightblue;
 color: brown;
 transform: rotate(360deg) scale(1.2);

}
li {
  box-sizing: border-box;
  width: 100%;
  list-style: none;
  padding: 10px 10px;
  background:#fff;
 background: transparent;

}

li:not(:last-child){
  border-bottom: 1px solid #111;
}</script>
</body>
</html>