In my toplevel menu items, I would like to make a subline for each item. I don't think it's possible to do by default, byt YooTheme has done it in many of their templates.

The menu output look like this

<div class="moduletable_menu">
<ul id="mainmenu" class="menu">
    <li class="active item1" id="current">
        <a href="URL_HIDDEN">
            <span>Services</span>
        </a>
    </li>
</ul>

This basically outputs a one line menu item like so:

Services

What I would like to do is have a menu item like this:

Services
Service x, Service y, Service z

For reference, have a look at the main menu on the YooTheme demo page.

The way YooTheme does this, is using two pipes (||) as a linebreak, so in the Joomla backend you type "Services||Service x, Service y, Service z" as the menu title, and then there must be some fancy javascript that breaks this title into two spans, ready to be styled using css.

Does anyone know of an easy way to code this?

Please note that I am looking to build this feature into a custom template (ie. non-yootheme).

Also note that I am not using MooTools, but Jquery instead.