slideToggle dropdown menu WITHOUT nested lists

So my problem is that I've got a main navigation with a dropdown menu underneath "products". I positioned the dropdown menu, set it to display: none, then wrote jQuery to slideToggle the menu when a particular LI is hovered over. The issue is that when I hover开发者_StackOverflow中文版 over the "Products" LI and try to hover over the dropdown, it disappears because I'm no longer hovering over that LI.

You're probably thinking "Just make nested lists!!!!". Well, I don't want to. I've got some jQuery being applied to the main navigation that I don't want to effect the dropdown. I just want a way to be sure the dropdown is open when the mouse is hovered over either the main LI or the dropdown UL and that the dropdown is closed when the mouse is hovered over neither.

In my code I've tried to make it so that if the mouse is over the dropdown UL it stays open, but the mouse leaving the LI trumps that maybe? HELP PLEASE! My HTML and jQuery is below.

Link to the entire page I'm working on: http://heylush.net/driven/

HTML:

              <ul id="topnav">
                    <li class="home"><a href="index.html">Home</a></li>
                    <li class="aboutus"><a href="#">About Us</a></li>
                    <li class="products" class="drop1"><a href="#">Products</a></li>
                    <li><a href="#">Industries</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">Contact Us</a></li>
              </ul><!--#topnav-->
              <ul id="products-nav">
                    <li><img src="images/nav-arrow.png" /><a href="#">Overview</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Roadside Assistance</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Tire &amp; Wheel</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Key Replacement</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Dent Repair</a></li>
                    <li><img src="images/nav-arrow.png" /><a href="#">Windshield Protection</a></li>
              </ul><!--#products-nav-->

jQuery:

        $(document).ready(function() {
            $('ul#products-nav').css('display', 'none');
            $('li.products').mouseenter(function(){
                $('ul#products-nav').slideToggle('medium');
            }).mouseleave(function(){
                $('ul#products-nav').slideToggle('medium');
            });
            $('ul#products-nav').mouseenter(function(){
                $(this).css('display', 'block');
            }).mouseleave(function(){
                $(this).css('display', 'none');
            });
            $('ul#products-nav li').mouseenter(function(){
                $(this).children('img').replaceWith('<img src="images/hover-arrow.png" />');
                $(this).children('a').css('color', '#6da3e0');
            }).mouseleave(function(){
                $(this).children('img').replaceWith('<img src="images/nav-arrow.png" />');
                $(this).children('a').css('color', '#2160ac');
            });
        });

You should put your product-nav ul inside li, so when mouse will be over the ul it will stil be over the li.

          <ul id="topnav">
                <li class="home"><a href="index.html">Home</a></li>
                <li class="aboutus"><a href="#">About Us</a></li>
                <li class="products" class="drop1"><a href="#">Products</a>
                    <ul id="products-nav" style="display:none">
                      <li><img src="images/nav-arrow.png" /><a href="#">Overview</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Roadside Assistance</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Tire &amp; Wheel</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Key Replacement</a></li>
                      <li><img src="images/nav-arrow.png" /><a href="#">Dent Repair</a></li>
                     <li><img src="images/nav-arrow.png" /><a href="#">Windshield Protection</a></li>
                  </ul><!--#products-nav-->
                </li>
                <li><a href="#">Industries</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Contact Us</a></li>
          </ul><!--#topnav-->