Horizontal shifting of Menus on click

Check this link Click Me , as you can see I have 12 Menu items, but due to space constraint can't show more than 4 menus. As you can see currently only Menu1 to Menu4 is visible, other Meus are hidden.

Update: As Jsfiddle did some cleaning they deleted my fiddle, here above I posted answered fiddle.In my question one jquery part was not there.

I have two button:

1. Move Left by -1 (later will be referred as 'ML')
2. Move Right by +1 (later will be referred as 'MR')

I am trying to achieve this:

1. Click on MR will make menus shift along +1
2. Click on ML will make menus shift along -1

HTML

<div id="outer">
<input type="button" value="move left by -1" class="left" />
<input type="button" value="Move Right by +1" class="left" />
<ul id="menulist">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    <li>Menu 7</li>
    <li>Menu 8</li>
    <li>Menu 9</li>
    <li>Menu 10</li>
    <li>Menu 11</li>
    <li>Menu 12</li>
</ul>

CSS

#outer {
    width:448px;
    overflow:hidden;
}
.left {
    float:left;
}
ul, li {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
ul {
    font-size:0;    
    float:left;
    width:1400px;
}
li {
    display:inline-block;
    padding:5px;
    background:lightgrey;
    border:darkgrey;
    width:100px;
    overflow:hidden;
    text-align:center;
    font-size:14px;
    border:1px solid black;
}

Any help regarding this will be highly appreciated.

Problem courtesy of: ankitd

Jsfiddle

As mentioned in the comments above, if this does not work in IE, see if this stack overflow question will help you

HTML

<div id="outer">
    <input type="button" value="move left by -1" class="left" />
    <input type="button" value="Move Right by +1" class="right" />
    <ul id="menulist">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
        <li>Menu 5</li>
        <li>Menu 6</li>
        <li>Menu 7</li>
        <li>Menu 8</li>
        <li>Menu 9</li>
        <li>Menu 10</li>
        <li>Menu 11</li>
        <li>Menu 12</li>
    </ul>

CSS

#outer {
    width:448px;
    overflow:hidden;
}
.left {
    float:left;
}
ul, li {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
ul {
    font-size:0;
    float:left;
    width:1400px;
}
li {
    display:inline-block;
    padding:5px;
    background:lightgrey;
    border:darkgrey;
    width:100px;
    overflow:hidden;
    text-align:center;
    font-size:14px;
    border:1px solid black;
}

JS

$('.left').click(function () {
    if (parseInt($('#menulist').css('margin-left'), 10) >= -784) {
        $('#menulist').animate({
            'marginLeft': "-=112px" //moves left
        });
    }
});
$('.right').click(function () {
    if (parseInt($('#menulist').css('margin-left'), 10) >= 0) {
        $('#menulist').css('margin-left', '0px!important');
    } else {
        $('#menulist').animate({
            'marginLeft': "+=112px" //moves right
        });
    }
});

Solution courtesy of: ctwheels

double

li {
        border:darkgrey;
        border:1px solid black;
    }

html

<input type="button" value="move left by -1" class="left" />
<input type="button" value="Move Right by +1" class="right" />

jquery

$('.left').click(function() {
    if($('#menulist').css('margin-left')=='-896px'){
         $('#menulist').css('margin-left','-896px!important');
    }
    else{
        $('#menulist').animate({
        'marginLeft' : "-=112px" //moves left
        });
    }
});
$('.right').click(function() {
    if($('#menulist').css('margin-left')=='0px'){
         $('#menulist').css('margin-left','0px!important');
    }
    else{
        $('#menulist').animate({
        'marginLeft' : "+=112px" //moves right
        });
    }
});

Discussion courtesy of: avril alejandro