XBMC web remote design 01

HTML

<div class="content_wrapper">
    <div class="top_menu">
        <ul>
            <li class="first"><h2>Film</h2></li>
            <li class="active"><h2>T.V.</h2>
                <ul>
                    <li>Browse</li>
                    <li>Search</li>
                    <li>Playlist</li>
                </ul>
            </li>
            <li>Music</li>
            <li>Disc</li>
            <li class="last">Settings</li>
        </ul>
    </div>
</div>

CSS

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}
/* EOF Reset */

body {
    background-image: url('https://lh4.googleusercontent.com/-sQYbe8GrXMo/UFkr8XpV1zI/AAAAAAAAAUU/tB66xT7kHgo/s144/amu_noise.png');
}
.content_wrapper {
    background-color: #ededed;
    width: 900px;
    margin-left: auto;
    margin-right:auto;
}
.top_menu ul {display: inline-block; list-style:none;  margin:0; padding:0; }
.top_menu ul li {display: list-item; padding: 5px 5px 0px 5px; border-left: groove 2px #999999; float:left;}
.top_menu ul li.first { border-left: none;}
.top_menu ul li.active { background-color: #999999; color:white; border:none; padding-left:6px; padding-right:6px; }
.top_menu ul li ul {display:none; }
.top_menu ul li {border:none;}

JavaScript

$('.top_menu ul li').click(function(e){
    $(this).not('.active'.closest('.active').removeClass('active')
})