Carousel

by shriek

HTML

<div id="slider-nav" class="slidernav visible">
    <div id="slider-overflow" class="">
        <div class="slider-mover">
            <table class="slider-nav-items standards-links clear">
                <tr>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions Promotions Promotions Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                    </td>
                    <td> <a...

CSS

#slider-nav {
    float:left;
}
#slider-nav .slider-nav-items .selected a {
    color:black;
}
#slider-nav .slider-mover {
    position: relative;
    display: block;
    float: left;
    padding: 0 0 .9em 0;
}
#slider-nav .slider-nav-items {
    position: relative;
    display: block;
    float: left;
    background:pink;
}
#slider-overflow {
    border-bottom: 1px solid #ccc;
    padding: 0 1.25em;
}
tr {
    display: inline;
    width: auto;
    margin: 1em 2em 1em 0;
    float: none;
    text-decoration:none;
    color:green;
}
td a {
    text-decoration: none;
    padding: 1em;
    display: inline-block;
    line-height: 1.2;
    vertical-align: top;
    white-space: normal;
    max-width: 16em;
    font-size: .85em;
    margin: 0 1em;
    color: #0096D6;
    font-family:"HPSimplifiedBold";
}
.slidernav {
    border:2px solid red;
}
.visible {
    overflow:visible;
}