Hola a todos les traigo un menu desplegable estilo ipod con varios themes que espero les gusten.
Bueno empezemos

..

Peguen este codigo en la parte de el texto por encima de la pagina o antes de

Código:

 
    <script type="text/javascript" src="http://codes4web.t35.com/js/jquery-1.3.2.menu.js"></script>
    <script type="text/javascript" src="http://codes4web.t35.com/js/fg.menu.js"></script>
   
    <link type="text/css" href="http://codes4web.t35.com/css/fg.menu.css" media="screen" rel="stylesheet" />
    <link type="text/css" href="http://codes4web.t35.com/css/ui.all.css" media="screen" rel="stylesheet" />
   
    <!-- styles for this example page only -->
    <style type="text/css">
    body { font-size:62.5%; margin:0; padding:0; }
    #menuLog { font-size:1.4em; margin:20px; }
    .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
   
    .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em;
text-decoration:none !important; cursor:pointer; position: relative;
text-align: center; zoom: 1; }
    .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
    a.fg-button { float:left;  }
    button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
   
    .fg-button-icon-left { padding-left: 2.1em; }
    .fg-button-icon-right { padding-right: 2.1em; }
    .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
    .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
    .fg-button-icon-solo { display:block; width:8px; text-indent:
-9999px; }    /* solo icon buttons must have block properties for the
text-indent to work */   
   
    .fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
    </style>
   
    <!-- style exceptions for IE 6 -->
    <!--[if IE 6]>
    <style type="text/css">
        .fg-menu-ipod .fg-menu li { width: 95%; }
        .fg-menu-ipod .ui-widget-content { border:0; }
    </style>
    <![endif]-->   
   
    <script type="text/javascript">   
    $(function(){
        // BUTTONS
        $('.fg-button').hover(
            function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
            function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
        );
       
        // MENUS       
        $('#flat').menu({
            content: $('#flat').next().html(), // grab content from this page
            showSpeed: 400
        });
       
        $('#hierarchy').menu({
            content: $('#hierarchy').next().html(),
            crumbDefaultText: ' '
        });
       
        $('#hierarchybreadcrumb').menu({
            content: $('#hierarchybreadcrumb').next().html(),
            backLink: false
        });
       
        // or from an external source
        $.get('menuContent.html', function(data){ // grab content from another page
            $('#flyout').menu({ content: data, flyOut: true });
        });
    });
    </script>
   
    <!-- theme switcher button -->
    <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
    <script type="text/javascript"> $(function(){ $('<div
style="position: absolute; top: 20px; right: 300px;"
/>').appendTo('body').themeswitcher(); }); </script>

En la parte que dice:

$(function(){ $('style="position: absolute; top: 20px; right: 300px;"
/>').appendTo('body').themeswitcher(); });

Pueden editar la posicion del selector de temas o si lo desean quitarlo.

..

Para colocar el menu peguen este codigo donde lo deseen.

Donde # es la pagina a la que iran y link es el nombre de la pagina

Código:

<a tabindex="0" href="#news-items" class="fg-button
fg-button-icon-right ui-widget ui-state-default ui-corner-all"
id="hierarchy"><span class="ui-icon
ui-icon-triangle-1-s"></span>Nombre del menu</a>
<div id="news-items" class="hidden">
<ul>
    <li><a href="#">Menu</a>
        <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </li>
    <li><a href="#">menu2</a>
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
    </li>
    <li><a href="#">link</a></li>
    <li><a href="#">menu3</a>
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a>
            <ul>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>


Pueden ver un demo aqui