Под меню в меню )

[foxig]

Подскажите как сделать что бы в меню нормально отображалось данное подменю и при нажатии на пункт 1 появлялись подпункты 1. ну соответственно для пунктов 2 и 3 аналогично
немогу разобраться


вот css и html

PHP код:

[SIZE="1"]<div id="container">


    <ul id="nav">
        <li id="selected"><a href="#">main</a>
        

        
        <li ><a href="#">main</a>
        <li><a href="#">main</a>
        <li ><a href="#">main</a>
        
   
 </ul>
</div>
        <div id="submenu2">
<ul id="submenu">
                 <li id="selected2"><a href="#">submain</a></li>
                    <li><a href="#">submain</a></li>
                                  <li><a href="#">submain</a></li>
                    <li><a href="#">submain</a></li>

            </ul></li>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
<script type="text/javascript" src="2.js"></script>

<script type="text/javascript">
    $('#nav').spasticNav();
</script>

<script type="text/javascript">
    $('#submenu').spasticSubmenu();
</script>[/SIZE] 


PHP код:

#container {
    width: 1200px;
    margin: 100px auto;
}

ul, li {
    margin: 0;
    padding: 0;
}

#blob {
    background: #0b2b61;
    border-right: 1px solid #0059ec;
    border-left: 1px solid #0059ec;
    position: absolute;
    z-index: 1;
    top: 0;
    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
    background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #011331;
    -webkit-box-shadow: 2px 3px 10px #011331;
}

#nav {
    position: relative;
    background: #292929;
    float: left;
}

#nav li {
    float: left;
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
}

#nav li a {
    color: #e3e3e3;
    z-index: 2;
    position: relative;
    cursor: pointer;
    float: left;
    font-size: 30px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    padding: 30px 45px;
}



#submenu2 {

    width: 1200px;
    float:left;
    border: 1px solid black;}
    
    
#submenu li {
    float:left;
    border: 1px solid black;
        list-style: none;
}
#submenu li a {
    color: #e3e3e3;
    z-index: 2;
    position: relative;
    cursor: pointer;
    float: left;
    font-size: 30px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    padding: 30px 45px;
}

#blob2 {
    background: #0b2b61;
    border-right: 1px solid #0059ec;
    border-left: 1px solid #0059ec;
    position: absolute;
    z-index: 1;
    top: 0;
    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
    background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #011331;
    -webkit-box-shadow: 2px 3px 10px #011331;
} 


ну и если поможет то js

PHP код:

(function($) {

    $.fn.spasticSubmenu = function(options) {
    
        options = $.extend({
            overlap : 20,
            speed : 500,
            reset : 1500,
            color : '#0b2b61',
            easing : 'easeOutExpo'
        }, options);
    
        return this.each(function() {
        
             var submenu = $(this),
                 currentPageItem = $('#selected2', submenu),
                 blob2,
                 reset;
            
                 
             $('<li id="blob2"></li>').css({
                 width : currentPageItem.outerWidth(),
                 height : currentPageItem.outerHeight() + options.overlap,
                 left : currentPageItem.position().left,
                 top : currentPageItem.position().top - options.overlap / 2,
                 backgroundColor : options.color
             }).appendTo(this);
             
             blob2 = $('#blob2', submenu);
             
            $('li:not(#blob2)', submenu).hover(function() {
                // курсор мыши над объектом
                clearTimeout(reset);
                blob2.animate(
                    {
                        left : $(this).position().left,
                        width : $(this).width()
                    },
                    {
                        duration : options.speed,
                        easing : options.easing,
                        queue : false
                    }
                );
            }, function() {
                // курсор мыши сдвинулся с объекта    
                reset = setTimeout(function() {
                    blob2.animate({
                        width : currentPageItem.outerWidth(),
                        left : currentPageItem.position().left
                    }, options.speed)
                }, options.reset);
    
            });
        
        }); // each() 
    
    };

})(jQuery); 


[foxig]

вот визуальный пример