Submenu stay open on menu click
<p>I have a problem with js menu code. first let me explain what I try to do.</p>

<p>I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.</p>

<p>Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate.</p>

<p>So, here is the code I have so far:</p>

<pre><code>&lt;div id="topnav"&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href="index.html"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#"&gt;Over Meves&lt;/a&gt;
                &lt;ul class="submenu"&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Historie&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Onze mensen&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Werkzijze&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="vervolg3.html"&gt;Disciplines&lt;/a&gt;
                &lt;ul class="submenu"&gt;
                    &lt;li&gt;&lt;a href="vervolg.html" class="suba"&gt;Klimaatbeheersing&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Elektrotechniek&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Sanitaire techniek&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Energiebesparingstechniek&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Bouwfysica en geluid&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Diensten energiebesparing&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#"&gt;Expertise&lt;/a&gt;
                &lt;ul class="submenu"&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Woningbouw &amp; Utiliteit&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Zorg &amp; Welzijn&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Milieu &amp; Energie&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Beheer &amp; Onderhoud&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;EPA &amp; EPC&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Legionella beheersing&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;           
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="#"&gt;Contact&lt;/a&gt;
                &lt;ul class="submenu"&gt;
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Adres &amp; route&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href="#" class="suba"&gt;Werken bij&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>The javascript:</p>

<pre><code>var ddmenuitem = 0;
function jsddm_open()
{  jsddm_close();
   ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{  
    if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{  
   $('#topnav &gt; ul &gt; li').bind('click', jsddm_open)
   $('#topnav ul li a.suba').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#topnav ul li a.suba').removeClass('active');
       $(this).addClass('active');
     }
   });
       $('a').filter(function(){
            return this.href === document.location.href;
       }).addClass('active')
       $("ul.submenu &gt; li &gt; a").each(function () {
         var currentURL = document.location.href;
         var thisURL = $(this).attr("href");
         if (currentURL.indexOf(thisURL) != -1) {
             $(this).parent("ul.submenu").css('display', 'block');
         }
       });
});
</code></pre>

<p>And the css:</p>

<pre><code>#topnav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}
#topnav ul li 
{
    float: left;
    margin: 0;
    padding: 0;
}
#topnav ul li a
{
    padding: 5px 15px;
    color: #00537F;
    text-decoration: none;
    display: block;
    font-weight: bold;
}
#topnav ul li a:link
{
    color: #FFF;
    text-decoration: none;
}
#topnav ul li a:visited
{
    color: #FFF;
    text-decoration: none;
}
#topnav ul li a:hover
{
    color: #FFF;
    text-decoration: underline;
}
#topnav ul li a.active
{
    text-decoration: underline;
    color: #FFF;
}
/*#topnav ul li:hover .submenu
{
    display:block;
}*/
#topnav ul li ul.submenu
{
    float: left;
    padding: 4px 0;
    position: absolute;
    left: 0;
    top: 24px;
    display: none;
    background: #e0e0e0;
    color: #00537F;
}
#topnav ul li ul.submenu a
{
    display: inline;
    color: #00537F;
    padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
    border-right-width: 1px; 
    border-right-style: solid;
    border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
    border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
    color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
    color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
    text-decoration: underline;
    color: #00537F;
}
#topnav ul li ul.submenu li.active
{
    text-decoration: underline;
    color: #00537F;
}
#topnav ul li ul.submenu a.active
{
    text-decoration: underline;
    color: #00537F;
}
</code></pre>

<p>Please help.</p>

<p><strong>Edit</strong></p>

<p>The submenu isn't showing when I load a parent page.</p>

<p>I've been playing with a code, but this is still not working:</p>

<pre><code>  $('#topnav a').each(function(){
  var myHref= $(this).attr('href');
   if( url.match( myHref)) {
$(this).addClass('active');
$(this).closest('ul').css('display', 'block');
    }
  });
</code></pre>
