jQuery.fg.Menu.TryOut

Just playing with this plugin

HTML

<script src="http://filamentgroup.com/examples/menus/fg.menu.js"></script>
<link rel="stylesheet" href="http://filamentgroup.com/examples/menus/fg.menu.css">
<link rel="stylesheet" href="http://filamentgroup.com/examples/menus/theme/ui.all.css">
<html>
    <head></head>
    <body>
        <a tabindex="0" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>&nbsp;</a> 
        <div id="news-items-2" class="hidden"> 
            <ul> 
                <li><a href="#">Breaking News</a> 
                    <ul> 
                        <li><a href="#">Entertainment</a></li> 
                        <li><a href="#">Politics</a></li> 
                        <li><a href="#">A&amp;E</a></li> 
                        <li><a href="#">Sports</a> 
                            <ul> 
                                <li><a href="#">Baseball</a></li> 
                                <li><a href="#">Basketball</a></li> 
                                <li><a href="#">A really long label would wrap nicely as you can see</a></li> 
                                <li><a href="#">Swimming</a> 
                                    <ul> 
                                        <li><a href="#">High School</a></li> 
                                        <li><a href="#">College</a></li> 
                                        <li><a href="#">Professional</a> 
                                            <ul> 
                                                <li><a href="#">Mens Swimming</a> 
                                                    <ul> 
                                                        <li><a href="#">News</a></li> 
                                                        <li><a href="#">Events</a></li> 
                                                        <li><a href="#">Awards</a></li> 
                                                       ...

CSS

/*styles to be used in Filament Group Lab example pages*/
body {
    font-family: "Segoe UI", Frutiger, Tahoma, "Helvetica", "Helvetica Neue", Arial, sans-serif; 
    font-size:62.5%;
    background:#fff; 
    color: #444;
margin: 20px;
}

#demoHeader {
    background:#3d8717;    
    padding: 15px;
    position: relative;
margin: 0 0 5em 0;
height: 1%;
}
a img {border: 0;}
#demoHeader img {float: left; margin-bottom: .9em;}

#demoHeader h1 { float:left; font-size:1.4em; line-height: 1.8em; font-weight:bold; margin: 0; color: #fff; padding-left: 20px; border-left: 1px solid #fff; margin-left: 20px;}
#demoHeader h1 a {color: #fff; font-weight:bold;}
p#copyright {color: #fff; padding: .5em 0 0; margin: 0; clear: both; border-top: 1px solid #fff; width: 100%; font-size: 1.1em;}
body { font-size:62.5%; }
#menuLog { font-size:1.4em; margin:10px 20px 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; }

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        
    $('#hierarchy').menu({
        content: $('#hierarchy').next().html(),
        crumbDefaultText: ' '
    });

    $('#hierarchybreadcrumb').menu({
        content: $('#hierarchybreadcrumb').next().html(),
        backLink: false
    });
});