Drop-down menu not displaying properly when using jquery form validation

Question

I use this script to validate html form's

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
  $(function(){ 
    $('#member_form').validate({
      errorElement:'span'
    });
  });
</script>

On the pages I use it on, the quicklinks drop-down menu displays to the left, which you will see here: http://grab.by/1Rgv

On pages this jquery validation script is not being ran on, it displays properly, like this: http://grab.by/1Rgx

Quicklinks html

<li id="quicklinks"><a href="#" title="Quicklinks">Quicklinks</a>
    <ul>
        <li><a href="link">Link Title</a></li>
        <li><a href="link">Link Title</a></li>
        <li><a href="link">Link Title</a></li>
    </ul>
</li>

CSS for quicklinks:

#header-nav-top li#quicklinks a:link,
#header-nav-top li#quicklinks a:visited,
#header-nav-top li#quicklinks a:active {
    padding-left: .9em;
    background: transparent url('/site/images/quicklinks_bullet.gif') no-repeat 0em .5em;
}

#header-nav-top li#quicklinks.hover {
    position: relative;
}

#header-nav-top li#quicklinks ul {
    position: absolute;
    display: none;
    xleft: -9999em;
    top: 10px;
    width: 142px;
    padding:5px 2px 5px 5px;
    z-index: 90;
    margin: 0px;
    background-color: #055830;
    xborder: 1px solid #FDBE2F;
    xborder-width: 0px 1px 1px;
}

#header-nav-top li#quicklinks:hover ul,
#header-nav-top li#quicklinks.hover ul {
    left: 0px;
    display: block;
}

#header-nav-top li#quicklinks ul li {
    background: transparent none;
    float: none;
    margin: 0px 0px 0px;
    line-height: 1.4em;
    display: block;
    border:1px solid #055830;
}

#header-nav-top li#quicklinks ul li a:link,
#header-nav-top li#quicklinks ul li a:visited,
#header-nav-top li#quicklinks ul li a:active {
    color: #fff;
    display: block;
    text-decoration: none;
    background: transparent none;
}

#header-nav-top li#quicklinks ul li a:hover {
    color: #C26B1A;
    background: transparent url('/site/images/bullet_link.gif') no-repeat 0% 6px;
}

I had trouble w/ quicklinks displaying behind the subheader in the past, and had to edit the z-index, which got it to work, I doubt that is the culprit, but I thought it'd be something I should mention.

This is on a development server, which is behind a firewall, so if you need to see how the site is set up, you may look at the production site: herkimer.edu, which I do not currently use the validation script on.

Any help is appreciated.