jquery horizontal submenu stay open on menu click
Maybe this is a related question, but I couldn't find a good solution for it, so here is my question.
I have a horizontal menu with some subitems. At the moment when I click on the main menu the submenu is being shown and it remains open even if I click anywhere on the page.
But here is the tricky part, when I click on a menu item (in the submenu) I want the submenu to display the items on which the page is.
For example the menu looks like this: home, page1, page2 and submenu (of page1): page1a, page1b. So when I click on page1, submenu with page1a and page1b opens, but when I click on page1a the page for page1a opens but the submenu remains closed, while I want it to display the submenu of page1.
Here is the html menu I have:

    <ul id="topnav">
        <li>
        	<a href="index.html">Home</a>
        </li>
        <li>
            <a href="#">Over Meves</a>
            <!--Submenu begint hier-->
            <span>
                <a href="#">Historie</a> |
                <a href="#">Onze mensen</a> |
                <a href="#">Werkzijze</a>
            </span>
        </li>
        <li>
            <a href="#">Disciplines</a>
            <!--Submenu begint hier-->
            <span>
                <a href="vervolg.html">Klimaatbeheersing</a> |
                <a href="#">Elektrotechniek</a> |
                <a href="#">Sanitaire techniek</a> |
                <a href="#">Energiebesparingstechniek</a> |
                <a href="#">Bouwfysica en geluid</a> |
                <a href="#">Diensten energiebesparing</a>
            </span>
        </li>
        <li>
            <a href="#">Expertise</a>
            <!--Submenu begint hier-->
            <span>
                <a href="#">Woningbouw & Utiliteit</a> |
                <a href="#">Zorg & Welzijn</a> |
                <a href="#">Milieu & Energie</a> |
                <a href="#">Beheer & Onderhoud</a> |
                <a href="#">EPA & EPC</a> |
                <a href="#">Legionella beheersing</a>
            </span>          	
        </li>
        <li>
            <a href="#">Contact</a>
            <!--Submenu begint hier-->
            <span>
                <a href="#">Adres & route</a> |
                <a href="#">Werken bij</a>
            </span>
        </li>
    </ul>

The jquery that opens the submenu:

    <script type="text/javascript">
    var ddmenuitem = 0;
    function jsddm_open()
    {  jsddm_close();
    ddmenuitem = $(this).find('span').css('display', 'block');
    }
    function jsddm_close()
    {  
    if(ddmenuitem) ddmenuitem.css('display', 'none');
    }
    $(document).ready(function()
    {  
    $('#topnav > li').bind('click', jsddm_open)
    $('#topnav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
    $('#topnav li a').removeClass('active');
    $(this).addClass('active');
    }
    });
    $('.project-tekst').trimTxt();
    });
    </script>

And the css for the menu:

    ul#topnav 
    {
	float: left;
	width: 900px;
	background: #00537F;
	padding: 0;
	margin: 0;
	margin-top: 3px;
	position: relative;
	list-style: none;
	font-size: 12px;
    }
    ul#topnav li 
    {
	float: left;
	margin: 0;
	padding: 0;
    }
    ul#topnav li a
    {
	padding: 5px 15px;
	color: #00537F;
	text-decoration: none;
	display: block;
	font-weight: bold;
    }
    ul#topnav li a:link
    {
	color: #FFF;
	text-decoration: none;
    }
    ul#topnav li a:visited
    {
	color: #FFF;
	text-decoration: none;
    }
    ul#topnav li a:hover
    {
	color: #FFF;
	text-decoration: underline;
    }
    ul#topnav li a.active
    {
	text-decoration: underline;
	color: #FFF;
    }
    ul#topnav li span 
    {
	float: left;
	padding: 4px 0;
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	background: #e0e0e0;
	color: #00537F;
    }
    ul#topnav li span a
    {
	display: inline;
	color: #00537F;
	padding: 4px 8px;
    }
    ul#topnav li span a:link
    {
	color: #00537F;
    }
    ul#topnav li span a:visited
    {
	color: #00537F;
    }
    ul#topnav li span a:hover
    {
	text-decoration: underline;
	color: #00537F;
    }
    ul#topnav li span a.active
    {
	text-decoration: underline;
	color: #00537F;
    }

I hope you guys can help me with this.

Thanks
jquery horizontal submenu stay open on menu click
===

Maybe this is a related question, but I couldn't find a good solution for it, so here is my question.
I have a horizontal menu with some subitems. At the moment when I click on the main menu the submenu is being shown and it remains open even if I click anywhere on the page.
But here is the tricky part, when I click on a menu item (in the submenu) I want the submenu to display the items on which the page is.
For example the menu looks like this: home, page1, page2 and submenu (of page1): page1a, page1b. So when I click on page1, submenu with page1a and page1b opens, but when I click on page1a the page for page1a opens but the submenu remains closed, while I want it to display the submenu of page1.
Here is the html menu I have:

    <ul id="topnav">
        <li>
        	<a href="index.html">Home</a>
        </li>
        <li>
            <a href="#">Over Meves</a>
            <!--Submenu begint hier-->
            <span>
                <a href="#">Historie</a> |
                <a href="#">Onze mensen</a> |
                <a href="#">Werkzijze</a>
            </span>
        </li>
        <li>
            <a href="#">Disciplines</a>
            <!--Submenu begint hier-->
            <span>
                <a href="vervolg.html">Klimaatbeheersing</a> |
                <a href="#">Elektrotechniek</a> |
                <a href="#">Sanitaire techniek</a> |
                <a href="#">Energiebesparingstechniek</a> |
                <a href="#">Bouwfysica en geluid</a> |
                <a href="#">Diensten energiebesparing</a>
            </span>
        </li>
        <li>
            <a href="#">Expertise</a>
            <!--Submenu begint hier-->
            <span>
                <a href="#">Woningbouw & Utiliteit</a> |
                <a href="#">Zorg & Welzijn</a> |
                <a href="#">Milieu & Energie</a> |
                <a href="#">Beheer & Onderhoud</a> |
                <a href="#">EPA & EPC</a> |
                <a href="#">Legionella beheersing</a>
            </span>          	
        </li>
        <li>
            <a href="#">Contact</a>
            <!--Submenu begint hier-->
            <span>
                <a href="#">Adres & route</a> |
                <a href="#">Werken bij</a>
            </span>
        </li>
    </ul>

The jquery that opens the submenu:

    <script type="text/javascript">
    var ddmenuitem = 0;
    function jsddm_open()
    {  jsddm_close();
    ddmenuitem = $(this).find('span').css('display', 'block');
    }
    function jsddm_close()
    {  
    if(ddmenuitem) ddmenuitem.css('display', 'none');
    }
    $(document).ready(function()
    {  
    $('#topnav > li').bind('click', jsddm_open)
    $('#topnav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
    $('#topnav li a').removeClass('active');
    $(this).addClass('active');
    }
    });
    $('.project-tekst').trimTxt();
    });
    </script>

And the css for the menu:

    ul#topnav 
    {
	float: left;
	width: 900px;
	background: #00537F;
	padding: 0;
	margin: 0;
	margin-top: 3px;
	position: relative;
	list-style: none;
	font-size: 12px;
    }
    ul#topnav li 
    {
	float: left;
	margin: 0;
	padding: 0;
    }
    ul#topnav li a
    {
	padding: 5px 15px;
	color: #00537F;
	text-decoration: none;
	display: block;
	font-weight: bold;
    }
    ul#topnav li a:link
    {
	color: #FFF;
	text-decoration: none;
    }
    ul#topnav li a:visited
    {
	color: #FFF;
	text-decoration: none;
    }
    ul#topnav li a:hover
    {
	color: #FFF;
	text-decoration: underline;
    }
    ul#topnav li a.active
    {
	text-decoration: underline;
	color: #FFF;
    }
    ul#topnav li span 
    {
	float: left;
	padding: 4px 0;
	position: absolute;
	left: 0;
	top: 24px;
	display: none;
	background: #e0e0e0;
	color: #00537F;
    }
    ul#topnav li span a
    {
	display: inline;
	color: #00537F;
	padding: 4px 8px;
    }
    ul#topnav li span a:link
    {
	color: #00537F;
    }
    ul#topnav li span a:visited
    {
	color: #00537F;
    }
    ul#topnav li span a:hover
    {
	text-decoration: underline;
	color: #00537F;
    }
    ul#topnav li span a.active
    {
	text-decoration: underline;
	color: #00537F;
    }

I hope you guys can help me with this.

Thanks