Menu simple

faire un menu déroulant le + simple possible (tous navis)

HTML

<div class="blocmenu">
    <ul>
        <li><span class="titremenu">Statuettes</span>

            <ul>
                <li><span class="titremenu">Bois</span>

                    <ul>
                        <li><a href="#ancienne">ancienne</a>
                        </li>
                        <li><a href="#récente">récente</a>
                        </li>
                    </ul>
                </li>
                <li><span class="titremenu">Ceramique</span>

                    <ul>
                        <li><a href="#ancienne">ancienne</a>
                        </li>
                        <li><a href="#récente">récente</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span class="titremenu">cage à grillon</span>

            <ul>
                <li><a href="#métal">métal</a>
                </li>
                <li><a href="#os">os</a>
                </li>
                <li><a href="#bois">bois</a>
                </li>
            </ul>
        </li>
        <li><span class="titremenu">Poids</span>

            <ul>
                <li><a href="#Violons">Violons</a>
                </li>
                <li><a href="#Animaux">Animaux</a>
                </li>
            </ul>
        </li>
        <li><span class="titremenu">x</span>

            <ul>
                <li><a href="#Violons">ancienne</a>
                </li>
                <li><a href="#Animaux">récente</a>
                </li>
            </ul>
        </li>
        <li><a href="#objets hors categorie">objets hors categorie</a>

    </ul>
</div>

CSS

.blocmenu {
    width: 250px;
    border: 1px dashed #C0C0C0;
    font: 100% arial;
}
.blocmenu UL {
    padding-left: 20px;
    list-style: none;
}
.blocmenu > UL {
    padding-left: 0px;
}
.titremenu {
    font: bold 110% arial;
    color: #D3E4BA;
    cursor: pointer;
    border: 1px outset gray;
    background-color: #415621;
    padding: 5px;
    margin-top: 5px;
    display: block;
}
.blocmenu LI A {
    font-size: 80%;
    border: 1px inset gray;
    background-color: #D3E4BA;
    margin-top: 6px;
    display: block;
    padding: 2px;
    color: #415621;
}
LI A.pageactive {
    border: 1px outset gray;
}
LI A.pageactive:after {
    content: url('flecheGauche2.png');
    vertical-align: middle;
    margin-left: 10px;
}

JavaScript

$(document).ready(function () {
    $("span.titremenu").next().hide();
    $("span.titremenu").click(function (e) {
        if ($(this).next(':hidden').length == 1) {
            $(this).next().show(400);
        } else {
            $(this).next().hide(400);
        }
    });
});