.click event on li plus link redirect
<p>I am not a programmer, just know a good amount of css and html, but almost no javascript.  I am trying to implement a free menu I found (thanks to stu nichols), but I am running into an issue I think is the the jquery script. I contacted the designer but he was not able to help.</p>

<p>I input the menu into jsfiddle.
<a href="http://jsfiddle.net/3vAaN/" rel="nofollow">http://jsfiddle.net/3vAaN/</a></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;ul class="leftnav1"&gt;
        &lt;li&gt;tier1
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t1 s1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t1 s2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t1 s3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;tier2&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t2 s1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t2 s2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t2 s3&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t2 s4&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#url"&gt;t2 s5&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;​
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>.leftnav1 { font: bold 15px/15px arial, sans-serif; text-align: center; border: 5px solid #400; }
.leftnav1 {background:#600; width:180px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul {background:#700; width:170px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul {background:#800; width:160px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul ul {background:#900; width:150px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

.leftnav1 ul { display: none; }

.leftnav1, .leftnav1 ul { padding: 10px 5px; margin: 0; list-style: none; -o-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); }
.leftnav1 li a { color: #ddd; text-indent: 0; text-decoration: none; display:block; }
.leftnav1 li { cursor: pointer; width: 100%; padding: 5px 0; }
.leftnav1 li a:hover { color: #fff; }
.leftnav1 li.has_ul { color: #fc0; }
.leftnav1 li.has_ul:hover { color: #0cf; }
.leftnav1 li.clicked { color: #0cf; }
</code></pre>

<p><strong>​JavaScript:</strong></p>

<pre><code>$(document).ready(function () {
timer=0;
/* time in milliseconds */
collapse = 10000;

    $(".leftnav1 li:has(ul)").click(function (event) {
        if (this == event.target) {
            $(this).toggleClass('clicked').children('ul').slideToggle();
            $(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
            $(this).siblings().removeClass('clicked').find("ul").slideUp();
        }
    }).addClass('has_ul');

    $(".leftnav1").mouseover(function() {
        clearTimeout(timer);
        });

    $(".leftnav1").mouseleave(function() {
            timer = window.setTimeout(function(){
                $('.leftnav1 li &gt; a').siblings().children().removeClass('clicked').find('ul').slideUp();
                $('.leftnav1 li &gt; a').parent().siblings().removeClass('clicked').find('ul').slideUp();
            }, collapse);
        }); 

});
</code></pre>

<p>​</p>

<p>If you look at the menu, the sliding works correctly on the first tier because it does not contain a link within the <code>li</code>.
On tier 2, I add a link within the <code>li</code> which also has a sub <code>ul</code>.  The sliding only works if you click on the very tip top of the <code>li</code> area.  Not on the whole <code>li</code> area.  My guess is that the link fires if you click anywhere on the word, not allowing the slide function in the script to fire, and vice versa when you click the tip top of the li area.</p>

<p>I have tried <code>display:block</code> in every possible class that might solve it, and it hasn't.  Is it possible that jquery cannot fire a function and follow a link at the same time?  The implementation of the menu will be in a static left hand column of an ecommerce site, and the links will be to categories within the site that load in the inner page area.</p>
