CSS

#page-wrap {
    width: 300px;
    margin: 10px auto;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.box {
    background: #a7a7a7;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    margin: 0 0 15px 0;
}

.box ul li {
    font-size: 11px;
    margin: 0;
    border-bottom: 1px solid #666;
}

.box ul li a {
    color: #222;
    display: block;
    padding: 4px 4px;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

.box ul li:last-child,
.box ul li:last-child a {
    border: none;
}

.box ul li a:hover {
    background: #ccc;
    text-decoration: none;
}

#catNav {
    background: #494949;
    padding: 5px 5px 5px 37px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 0 10px 0;
}

#catNav li {
    display: inline;
}

#catNav li a {
    display: block;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9qkvlKxyqRUjqBeeFLjbJ4wCJc6v5FW5EiIZJ4KA0UxvqQwyK99CCf2Ya27lg1rqJxf9hWAoHZhc_TDz-men3WiyWdLJyV02TdhKZ7he-s4cf_sTWeSM7S8GseTirig13JMMgUnBvFlk/s1600/catSprite.png);
    float: left;
    border: none;
    padding: 0;
}

#catNav li a#list-one-button {
    background-position: -50px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-one-button {
    background-position: -50px -100px;
}

#catNav li a#list-one-button:hover {
    background-position: -50px 0;
}

#catNav a#list-two-button {
    background-position: -100px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-two-button {
    background-position: -100px -100px;
}

#catNav li a#list-two-button:hover {
    background-position: -100px 0;
}

#catNav a#list-three-button {
    background-position: 0 -50px;
}

#page-wrap #catNav li.activeCatButton a#list-three-button {
    background-position: 0 -100px;
}

#catNav li a#list-three-button:hover {
    background-position: 0 0;
}

#catNav a#list-four-button {
    background-position: -150px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-four-button {
    background-position: -150px -100px;
}

#catNav li a#list-four-button:hover {
    background-position: -150px 0;
}

HTML

<div id='page-wrap'>
    <div class='box'>
        <ul id='catNav'>
            <li class='activeCatButton'><a id='list-one-button' title='menu 1'>Menu 1</a>
            </li>
            <li><a id='list-two-button' title='menu2'>Menu 2</a>
            </li>
            <li><a id='list-three-button' title='menu 3'>Menu 3</a>
            </li>
            <li><a id='list-four-button' title='menu 4'>Menu 4</a>
            </li>
        </ul>
        <ul class='cat-list' id='list-one'>
            <li><a href='#'>Link 1 ..........</a>
            </li>
            <li><a href='#'>Link 2 ..........</a>
            </li>
            <li><a href='#'>Link 3 ..........</a>
            </li>
            <li><a href='#'>Link 4 ..........</a>
            </li>
            <li><a href='#'>Link 5 ..........</a>
            </li>
            <li><a href='#'>Link 6 ..........</a>
            </li>
            <li><a href='#'>Link 7 ..........</a>
            </li>
            <li><a href='#'>Link 8 ..........</a>
            </li>
            <li><a href='#'>Link 9 ..........</a>
            </li>
            <li><a href='#'>Link 10 .........</a>
            </li>
        </ul>
        <ul class='cat-list' id='list-two'>
            <li><a href='#'>Link 1 ..........</a>
            </li>
            <li><a href='#'>Link 2 ..........</a>
            </li>
            <li><a href='#'>Link 3 ..........</a>
            </li>
            <li><a href='#'>Link 4 ..........</a>
            </li>
            <li><a href='#'>Link 5 ..........</a>
            </li>
            <li><a href='#'>Link 6 ..........</a>
            </li>
            <li><a href='#'>Link 7 ..........</a>
            </li>
            <li><a href='#'>Link 8 ..........</a>
            </li>
            <li><a href='#'>Link 9 ..........</a>
            </li>
            <li><a href='#'>Link 10 .........</a>
            </li>
        </ul>
        <ul class='cat-list' id='list-three'>
            <li><a href='#'>Link 1 ..........</a>
            </li>
            <li><a href='#'>Link 2 ..........</a>
            </li>
            <li><a href='#'>Link 3 ..........</a>
            </li>
            <li><a href='#'>Link 4 ..........</a>
            </li>
            <li><a href='#'>Link 5 ..........</a>
            </li>
            <li><a href='#'>Link 6 ..........</a>
            </li>
            <li><a href='#'>Link 7 ..........</a>
            </li>
            <li><a href='#'>Link 8 ..........</a>
            </li>
            <li><a href='#'>Link 9 ..........</a>
            </li>
            <li><a href='#'>Link 10 .........</a>
            </li>
        </ul>
        <ul class='cat-list' id='list-four'>
            <li><a href='#'>Link 1 ..........</a>
            </li>
            <li><a href='#'>Link 2 ..........</a>
            </li>
            <li><a href='#'>Link 3 ..........</a>
            </li>
            <li><a href='#'>Link 4 ..........</a>
            </li>
            <li><a href='#'>Link 5 ..........</a>
            </li>
            <li><a href='#'>Link 6 ..........</a>
            </li>
            <li><a href='#'>Link 7 ..........</a>
            </li>
            <li><a href='#'>Link 8 ..........</a>
            </li>
            <li><a href='#'>Link 9 ..........</a>
            </li>
            <li><a href='#'>Link 10 .........</a>
            </li>
        </ul>
    </div>
</div>

JavaScript

<script type='text/javascript'>
    //<![CDATA[
    $(function () {

        $("#list-two").hide();
        $("#list-three").hide();
        $("#list-four").hide();

        $("#list-one-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-one").slideDown(600);
        });

        $("#list-two-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-two").slideDown(600);
        });

        $("#list-three-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-three").slideDown(600);
        });

        $("#list-four-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-four").slideDown(600);
        });

        $("#catNav li a").click(function () {
            $("#catNav li").removeClass("activeCatButton");
            $(this).parent().addClass("activeCatButton");
        });
    });
    //]]>
</script>

Demo