<ul class="menu">
    <li>
        <a href="categories.php">
            <div>Categories
                <div id="cat">
                    <span>HTML</span>
                    <span>CSS</span>
                    <span>PHP</span>
                </div>
            </div>
        </a>
    </li>
    <li><a href="#"><div>Something</div></a></li>
    <li><a href="#"><div>Else</div></a></li>
</ul>

/* Menu */
.menu
{
    width: 1000px;
    height: 103px;
    list-style: none;
    margin: 0 0 5px 0;
    padding: 0;
}

    /* Menu->Main Settings & Effects */
.menu li>a
{
    width: 198px;
    height: 100px;
    margin: 3px 2px 0 0;
    padding: 18px 0 0 1px;
    float: left;
    display: block;
    text-decoration: none;
    background: url(http://i.imgur.com/YBZHKcG.png);
    background-repeat: no-repeat;
    -webkit-transition: margin-top 0.1s linear;
    -moz-transition: margin-top 0.1s linear;
    -o-transition: margin-top 0.1s linear;
    -ms-transition: margin-top 0.1s linear;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    /* Menu->Front Face Text */
.menu li>a div
{
    width: 186px;
    height: 61px;
    text-align: center;
    color: #FFF;
    font: 24px/61px Tahoma, Geneva, sans-serif;
}

    /* Menu->Effects */
.menu li>a:hover
{
    width: 198px;
    height: 103px;
    margin: 0 2px 0 0;
    padding: 18px 0 0 1px;
    background: url(http://i.imgur.com/PVqqRqi.png);
    background-repeat: no-repeat;
    -webkit-transition: margin-top 0.1s linear;
    -moz-transition: margin-top 0.1s linear;
    -o-transition: margin-top 0.1s linear;
    -ms-transition: margin-top 0.1s linear;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.menu li>a.current
{
    width: 198px;
    height: 103px;
    margin: 0 2px 0 0;
    padding: 18px 0 0 1px;
    background: url(http://i.imgur.com/PVqqRqi.png);
    cursor: default;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

    /* Menu->Categories */
.menu #cat
{
    width: 187px;
    height: 20px;
    color: #FFF;
    font: 17px/20px Tahoma, Geneva, sans-serif;
}

.menu #cat span
{
    float: left;
    width: 62px;
    color: #555;
    border-top: 1px solid white;
    border-right: 1px solid white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.menu #cat span:last-child
{
    float: left;
    width: 63px;
    color: #555;
    border-top: 1px solid white;
    border-right: 1px solid white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.menu #cat .sHTML:hover {
    /* Effect on hover */
}
.menu #cat .sCSS:hover {
    /* Effect on hover */
}
.menu #cat .sPHP:hover {
    /* Effect on hover */
}