Q:

Drop Line Jquery Menu

Think I am on the right track with this but need the subLink's bar to close when the mouseleaves a sublink menu item and hovers over a non subLink but to not close if its sublink to sublink (hope that makes sense).
i.e. Home or Contact for example would not open the subLink bar and would close it if mouse hovered from a sublink hover state (for my example).
I understand that at present the mouseleave is on the entire #main-nav but I am stuck for how to go about this, probably really simple but hey got to start somewhere right? Just to let everyone know I sourced this menu from tutplus and am trying to recreate my own, thanks.
Please see my current code below:
CSS:
html, body {
    background: #2d2620;
    text-align: center;
    margin: 0px;
    height: 100%;
    width: 100%;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    position: relative;
    background: url(body.png) center no-repeat;
    min-height: 600px;
}
#body-image {
    margin-top: 60px;
}
#main-nav {
    margin: 0px 0px 0px 2px;
    text-align: left;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 0px;
}
#main-handle {
    width: 605px;
    float: right;
    margin-top: -1px;
}
#main-nav li {
    display: inline;
    list-style: none;
}
#main-nav li a {
    margin-right: 5px;
    font-size: 15px;
    text-decoration: none;
    color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    outline: 0;
    position: relative;
    top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
    background: #514539;
}
#sub-link-bar {
    background: #514539;
    min-height: 1px;
    border-bottom: #645546 1px solid;
}
.sub-links {
    display: none;
    position: absolute;
    width: 100%;
    text-align: left;
    left: 0px;
}
#main-nav li .sub-links li a:hover{
    background: #2d2620;
}
#main-nav li a.close{
    display: none;  
    position: absolute;
}
#main-nav li a.close:hover{
    background: #900;
}
.round {
    display:block
}
.round * {
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#645546
}
.round1 {
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #443a30;
    border-right:1px solid #443a30;
    background:#56493c
}
.round2 {
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #322a23;
    border-right:1px solid #322a23;
    background:#594c3e
}
.round3 {
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #594c3e;
    border-right:1px solid #594c3e;
}
.round4 {
    border-left:1px solid #443a30;
    border-right:1px solid #443a30
}
.round5 {
    border-left:1px solid #56493c;
    border-right:1px solid #56493c
}
.roundfg {
    background:#645546
}

JavaScript: using the jQuery 1.3.2 library.
$(document).ready(function(){
    $("#main-nav li a.main-link").hover(function(){
        $("#main-nav li a.main-link").removeClass("active");
        $(this).addClass("active");
        $("#sub-link-bar").animate({
            height: "40px"                     
        });
        $(".sub-links").hide();
        $(this).siblings(".sub-links").fadeIn();
    });
    $("#main-nav").mouseleave(function(){
        $("#main-nav li a.main-link").removeClass("active");
        $(".sub-links").fadeOut();
        $("#sub-link-bar").animate({
            height: "1px" 
        });     
    });
});

HTML:
</head>
 <body>
   <ul id="main-nav">
    <li><a class="main-link active" href="">Home</a></li>
    <li><a class="main-link subLink" href="">Tutorials</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Design</a> </li>
        <li><a href="" title="">HTML &amp; CSS</a> </li>
        <li><a href="" title="">Other</a> </li>
        <li><a href="" title="">PHP</a> </li>
        <li><a href="" title="">Ruby</a> </li>
        <li><a href="" title="">Site Builds</a> </li>
        <li><a href="" title="">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="" title="">Wordpress</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Articles</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">General</a> </li>
        <li><a href="" title="">Interviews</a> </li>
        <li><a href="" title="">News</a> </li>
        <li><a href="" title="">Web Roundups</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Freebies</a>
      <ul class="sub-links" style="display: none;">
        <li><a href="" title="">Books</a> </li>
        <li><a href="" title="">Icons</a> </li>
        <li><a href="" title="">Lightboxes</a> </li>
        <li><a href="" title="">Others</a> </li>
        <li><a href="" title="">Plugins</a> </li>
        <li><a href="" title="">Themes</a> </li>
        <li><a href="" title="">Tooltips</a> </li>
      </ul>
    </li>
    <li><a class="main-link subLink" href="">Videos</a>
        <ul class="sub-links" style="display: none;">
            <li><a href="" title="">Screencasts</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="">Contact</a></li>
  </ul>
</div>
<div id="sub-link-bar"></div>

A:

Updated:
JSFiddle.
Here's the new JS:
$(document).ready(function(){
    $('#main-nav > li').hover(function(){
        //Checks if it's already active, if so, does nothing.
        if(!$(this).find('.main-link').hasClass('active')){
            $("#main-nav > li a.active").removeClass("active");
            $(this).find('.main-link').addClass("active");
            //checks if there's a subnav, then opens it
            //otherwise it closes the #sub-link-bar
            if($(this).find('li').length){
                //$("#main-nav li a.close").stop().fadeIn();
                //There is no .close
                var that = this;
                $("#sub-link-bar").stop().animate({ height: "40px"}, function(){
                    $(that).find(".sub-links").fadeIn();
                });
            }
            else {
                 $(this).find(".sub-links").stop().fadeOut( function(){
                    $(this).css('opacity','1');
                    $("#sub-link-bar").stop().animate({height: "1px"});
                 });
            }
        }
    }, function(){
        //Checks if it has a subnav, if so, hides the text first, then the bar
        //if not, just closes the bar
        if($(this).find('li').length){
            $(this).css('opacity','1');
            $("#sub-link-bar").stop().animate({height: "1px"});
        }
        $("#sub-link-bar").stop().animate({height: "1px"});   
       $(this).find('.main-link').removeClass('active');
    });
});

Also added top:49px to your .sub-links CSS.

