<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Menu accordon avec jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #navigation {
            margin: 0;
            padding: 0;
            list-style: none:
            background: #000;
            color: #fff;
            width: 200px;
            font: 1.2em "Trebuchet MS", sans-serif;
            }
        #navigation a, #navigation span {
            display: block;
            padding: 4px 10px;
            color: #fff;
            text-decoration: none;
            background: #000 url(menu-item.png) left bottom no-repeat;
            }
        #navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
            background-image: url(menu-item-deroule.png);
            }
        #navigation .open a, #navigation .open span {
            background-image: url(menu-item-enroule.png);
            }
        #navigation a:hover, #navigation a:focus, #navigation a:active {
            text-decoration: underline;
            }
        #navigation .subMenu {
            font-size: .8em;
            background: #ccc url(subMenu.png) 0 0 repeat-x;
            font-size: .9em;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid #666;
            }
        #navigation ul.subMenu a {
            background: none;
            padding: 3px 20px;
            }
    body {
    background-color: #333333;
}
</style>
    <!--[if lte IE 6]>
    <style type="text/css">
        li {
            height: 1px;
            }
    </style>
    <![endif]-->
    <script type="text/javascript" src="jquery-1.2.1.js"></script>
    <script type="text/javascript">
    <!--
    $(document).ready( function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        $("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        $("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = $(this).text();
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").mouseover( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            }
            // On empche le navigateur de suivre le lien :
            return false;
        });
    
    } ) ;
    // -->
    </script>

</head>
<body>
    <ul id="navigation">
        <li><a href="" title="">Item 1</a></li>
        <li class="toggleSubMenu"><span>Item 2</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 2.1</a></li>
                <li><a href="" title="">Item 2.2</a></li>

                <li><a href="" title="">Item 2.3</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Item 3</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>

            </ul>
        </li>
        <li><a href="" title="">Item 4</a></li>
    </ul>    
</body>
</html>

  </body>
</html>