<div class="sc_menu">
  <ul class="sc_menu">
  <li><a href="#">
  <img src="img/1.jpg" alt="Menu"/><span>Menu</span>
  </a></li>
  <li><a href="#">
  <img src="img/2.jpg" alt="Navigation"/><span>Navigation</span>
  </a></li>
  <li><a href="#">
  <img src="img/3.jpg" alt="Scrolling"/><span>Scrolling</span>
  </a></li>
  <li><a href="#">
  <img src="img/4.jpg" alt="jQuery"/><span>jQuery</span>
  </a></li>
  </ul>
</div>

div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 145px;
  width: 500px;
  /* Add scroll-bars */
  overflow: auto;
}
ul.sc_menu {
  display: block;
  height: 110px;
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  margin: 0;
  background: url('navigation.png');
  list-style: none;
}
.sc_menu li {
  display: block;
  float: left;
  padding: 0 4px;
}
.sc_menu a {
  display: block;
  text-decoration: none;
}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.sc_menu span {
  display: none;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.sc_menu a:hover span {
  display: block;
}
.sc_menu img {
  border: 3px #fff solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.sc_menu a:hover img {
  filter:alpha(opacity=50);
  opacity: 0.5;
}

$(function(){
  //Get our elements for faster access and set overlay width
  var div = $('div.sc_menu'),
  ul = $('ul.sc_menu'),
  // unordered list's left margin
  ulPadding = 15;

  //Get menu width
  var divWidth = div.width();

  //Remove scrollbars
  div.css({overflow: 'hidden'});

  //Find last image container
  var lastLi = ul.find('li:last-child');

  //When user move mouse over menu
  div.mousemove(function(e){

  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
  });
});