menu item

by Ea Bangalore

HTML

<ul>
  <li>
  <div class="list">
  <div class="left">First Menu</div><div class="right">del</div></div></li>
  <li><div class="list"><div class="left">First Menu</div><div class="right">del</div></div></li>
  <li><div class="list"><div class="left">First Menu</div><div class="right">del</div></div></li>
  <li><div class="list"><div class="left">First Menu</div><div class="right">del</div></div></li>
  <li><div class="list"><div class="left">First Menu</div><div class="right">del</div></div></li>
</ul>

CSS

ul{
  display: inline;
  list-style: none;
  color:#fff;
}

ul div{
  display: inline-block;
}

div.list{
  display:block;
  width:227px;
  height:auto;
  background:red;
}
div.left{
    float: left;
    background: blue;
    width: 91%;
    border-bottom: 1px dotted #ccc;
}
div.right{
  float:right;
}

div.list:hover{
  transform:scale(1.032);
  transition:
  background:yellow;
}

div.list::after{
  content:'';
  display:table;
  clear:both;
}