Introduction

Here I am going to use the technique to add a nice rollover effect to UL lists so the user can easily home in on a particular list item just by rolling the mouse over it. This animation uses CSS3, which works in IE10+, FF, Chrome, and Safari.
Implementation
CSS code
Put this CSS code in the head section:
  1. <style>
  2. ul.animatedbgul {
  3. margin: 0;
  4. padding: 0;
  5. list-style: none;
  6. }
  8. ul.animatedbgul li {
  9. width: 100%;
  10. clear: left;
  11. /* clear contents of inner span, which will be floated left */
  12. overflow: hidden;
  13. /* clear contents of an inner span, which will be floated left */
  14. }
  16. ul.animatedbgul li span {
  17. display: block;
  18. float: left;
  19. /* cause width of each span to take up only as much space as needed */
  20. min-width: 0px;
  21. /* animated property. Explicit min-width defined so animation works. */
  22. margin-bottom: 5px;
  23. padding: 8px;
  24. color: #5d5d5d;
  25. }
  27. ul.animatedbgul li:hover span {
  28. color: #fff;
  29. background: #ce3e3e;
  30. border-left: 8px solid darkred;
  31. min-width: 450px;
  32. /* animated property. Set to desired final length of background */
  33. -webkit-box-shadow: 0 0 5px gray;
  34. -moz-box-shadow: 0 0 5px gray;
  35. box-shadow: 0 0 5px gray;
  36. -webkit-transition: all 0.3s ease-out;
  37. -moz-transition: all 0.3s ease-out;
  38. -o-transition: all 0.3s ease-out;
  39. transition: all 0.3s ease-out;
  40. }
  41. </style>
Html code
Place this HTML code in body section:
  1. <ul class="animatedbgul">
  2. <li><span>Java</span></li>
  3. <li><span>Python</span></li>
  4. <li><span>Clarion</span></li>
  5. <li><span>Clipper</span></li>
  6. </ul>