Сжатие хлебных крошек

by AJIEKCEU

HTML

<div>
  <ul>
    <li style='z-index:10'><a>Home&nbsp;dome</a></li>
    <li style='z-index:9'><a>Home&nbsp;dome</a></li>
    <li style='z-index:8'><a>Home&nbsp;dome</a></li>
    <li style='z-index:7'><a>Home&nbsp;dome</a></li>
  </ul>
</div>

CSS

div {
  overflow: hidden;
}
a {
  display: block;
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
  margin-left:-40px;
  
}
li {
  overflow: hidden;
  width: 50px;
  box-shadow: 0 0 30px rgba(0,0,0,1);
  float: left;
  background: #FFCCCC;
  border:1px solid #FF6666;
  position: relative;
}

JavaScript

$('a').hover(function() {
  $(this).parent().stop().animate({width: 90});
  $(this).stop().animate({'margin-left': 0});
}, function() {
  $(this).parent().stop().animate({width: 50}); 
  $(this).stop().animate({'margin-left': -40});
});