Dropdown menu

Witam,
Ostatnio staram się zrobić DropDown Menu. Na razie uzyskałem coś takiego:

CSS

<style type="text/css">
#accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
	background-color: #4F3E35;
}
#accordion div {
    display: block;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
    list-style: circle;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	color: #ffffff;
	font-size:18px;
}
#accordion div:hover {
	color: #866959;
}
#accordion ul {
    list-style: none;
    padding: 0 0 0 0;
}
#accordion ul{
    display: none;
}
#accordion ul li {
    font-weight: normal;
    cursor: auto;
    background-color: #4F3E35;
    padding: 0 0 0 7px;
}
#accordion a {
    text-decoration: none;
	color: #ffffff;
}
#accordion a:hover {
    color: #866959;
}
</style>

Javascript

<script type="text/javascript">
$("#accordion > li > div").click(function(){
 
    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
});
</script>

HTML

<ul id="accordion">
    <li><div>Sports</div>
        <ul>
            <li><a href="#">Golf</a></li>
            <li><a href="#">Cricket</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>
    <li><div>Technology</div>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>
    <li><div>Latest</div>
        <ul>
			<li><a href="#">Obama</a></li>
            <li><a href="#">Iran Election</a></li>
            <li><a href="#">Health Care</a></li>
        </ul>
    </li>
</ul>

Tu pojawia się moje pytanie. Wie ktoś jak zrobić dodatkowe trzecie submenu, z tym że chciałbym aby w każdym submenu zmniejszała się czcionka załóżmy o 1px.

Mam też inne drzewko, które bardziej by mnie interesowało tylko mam problem ze zmianą wielkości czcionki w każdym submenu.
http://jsbin.com/usaxig/1/edit

Możesz albo:

• dodawać klasę do każdego elementu np:

<ul>
    <li class="level1">
        <ul>
            <li class="level2">
            ...
            </li>
        </ul>
    </li>
<ul>

Co aż się prosi o błędy... ale jest też inny sposób:
Np: dla trzeciego poziomu css wyglądałby tak:

 
#jQ-menu ul li ul li ul li *{
.
.
.
}

Właśnie o coś takiego mi chodziło. Działa, dzięki. :)