<h3>A Scrolling menu without the scroll bar </h3>
<div class="menu-container">


<span class="navigate"><a id="scrollRight" href="#"><</a></span>
<div class="container">
            <!--<div class="slot">-->
                <span class="menu-block"> menu1 </span>
  <span class="menu-block"> Guitar </span>
  <span class="menu-block"> Bass Guitar </span>
  <span class="menu-block"> Cello </span>
  <span class="menu-block"> Electric Guitar </span>
  <span class="menu-block"> Drums </span>
  <span class="menu-block"> Keyboard </span>
  <span class="menu-block"> Fluet </span>
  <span class="menu-block"> menu1 </span><span class="menu-block"> menu1 </span><span class="menu-block"> menu1 </span>
              
            </div>
 
  <span class="navigate"> <a id="scrollLeft" href="#">></a></span>
</div>
  
  <p>Hover / Click the mouse on the left/right navigation arrow and see whats happening.</p>

.container{
    width: 500px;
    height: 25px;
    overflow:hidden;
    white-space: nowrap;
  border: 1px solid gray;
  padding:2px;
  display:inline-block;
  background-color: #eee;
  
}
#scroll-right{
  float:left;
}
.menu-block {
     width: 100px;
     height: 25px;
     display: inline-block;
     margin: 0;
     padding: 0;
  border-right: 1px solid #555;
  overflow:hidden;
  padding-top:3px;
 }
.menu-container{
  
  //border:1px solid red;
  
}
.navigate a{
  text-decoration:none;
 
 color:gray;
  
}
.navigate{
  border:1px solid gray;
  top:-10px;
   height: 25px;
  position: relative;
  padding:5px;
  margin-right:-5px;
  margin-left:-5px;
}

var step = 100;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollRight").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $(".container").animate({
        scrollLeft: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("right");
}).bind("mouseout", function(event) {
    scrolling = false;
});


$("#scrollLeft").bind("click", function(event) {
    event.preventDefault();
    $(".container").animate({
        scrollLeft: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "right" ? "-=1px" : "+=1px");
    $(".container").animate({
        scrollLeft: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}