jquery menu with subnav

Hi all,

I have a menu with sub nav items. I have some jquery so that when you are on a page with subnav the subnav is showing. However I want to adapt it so that if you also hover over the menu item which has a subnav then you can choose one of the options. At the moment the subnav disappears once you roll off the parent. Any ideas?

Any questions give me a shout....thank you

HTML Code:

---

<nav>
        <ul class="topnav">
        <li><a href="index.php">Home</a></li>
        <li>
            <a href="about-us.php">About Us</a>
            <ul>
                      <li><a href="a1.php">Sub one</a></li>
                  <li><a href="a2.php">Sub two</a></li>
                  <li><a href="a3.php">Sub three</a></li>
              </ul>
        </li>
        <li>
                <a href="our-services.php">Our Services</a>
                <ul>
                      <li><a href="our-services.php">Sub one</a></li>
                  <li><a href="our-services.php">Sub two</a></li>
                  <li><a href="our-services.php">Sub three</a></li>
              </ul>
        </li>
        <li><a href="contact-us.php">Contact Us</a></li>
    </ul>
</nav>

---

Code:

---

header nav ul.topnav
{
        float: left;
        height: 35px;
        margin: 5px 0 0 25px;
}
header nav ul.topnav li
{
        float: left;
        height: 35px;
        background: url(../img/global/nav/separator.gif) no-repeat 0 0;
        padding-left: 5px;
        margin-right: 5px;
}

header nav ul.topnav li:first-child
{
        padding: 0;
        background-image: none;
}
header nav ul.topnav li a
{
        display: block;
        height: 25px;
        line-height: 17px;
        padding: 0 9px;
        font-family: 'DINMedium';
        font-size: 16px;
        color: #fff;
        text-transform: uppercase;
        text-decoration: none;
        text-shadow: 0 -1px 0 #7DA13A;
        margin-top: 5px;
}
header nav ul.topnav li:hover a,
header nav ul.topnav li a.active
{
        color: #575759;
        text-shadow: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0px -1px 0px #78983D;
        -webkit-box-shadow: 0px -1px 0px #78983D;
        box-shadow: 0px -1px 0px #78983D;
        background: #fefffe; /* Old browsers */
        background: -moz-linear-gradient(top, #fefffe 0%, #ededee 100%);  /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefffe), color-stop(90%,#ededee)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #fefffe 0%,#ededee 90%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #fefffe 0%,#ededee 190%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #fefffe 0%,#ededee 90%); /* IE10+ */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fefffe', endColorstr='#ededee'); /* IE-8 */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefffe', endColorstr='#ededee',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #fefffe 0%,#ededee 190%); /* W3C */
}

header nav ul.topnav li ul
{
        position: absolute;
        top:48px;
        left: 35px;
        width: 940px;
        height: 28px;
        padding: 0;
        display:none;
}
header nav ul.topnav li ul.active
{
        display: block;
}
header nav ul.topnav li ul li
{
        background:none; /* removes separator from subnav */
        height: 28px;
        line-height: 24px;
        margin: 0;
        padding: 0;
}
header nav ul.topnav li ul li:hover
{
        line-height: 24px;
        margin: 0;
        padding: 0;
}
header nav ul.topnav li ul li:hover a,
header nav ul.topnav li ul li a
{
        float: left;
        display: block;
        height: 28px;
        line-height: 15px;
        font-size:12px;
        color: #575759;
        text-shadow: none;
        margin:3px 0 0 0;
        padding: 0 15px;
}
header nav ul.topnav li ul li:first-child a
{
        padding-left: 0;
}
header nav ul.topnav li ul li a:hover
{
        color: #52AA26;
}
header nav ul.topnav li:hover ul li a
{
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        background:none;
}

---

Code:

---

// Subnav
        $("ul.topnav li").hover(function(){
   
        $(this).addClass("hover");
        $('ul:first', this).css('display', 'block');
   
    }, function(){
   
        $(this).removeClass("hover");
        $('ul:first:not(.active)', this).css('display', 'none');
   
});

---

You're code seems to be working fine here in Chrome:
http://jsfiddle.net/dfreema1/98XrV/

hi, thank you for taking the time to look at the code.

The main issue is that when I click on a subnav item and the parent is active. So I am on the page subnav one and about us is highlighted. Then I hover over our services - the subnav shows but over the top of the current active subnav. Not sure how to make it work best I think. Think I need to hide the current active subnav when I hover over the new parent with subnav.

Any ideas?

I know this is old but it's the reason i registered :)

You have space between the topnav and subnav. I am guessing because you wanted to separate the a elements more or what not.

Simple solution, always make sure you have no space between the topnav and subnav. If you need to create separation, use padding not margin or positioning.

Code:

---

header nav ul.topnav li ul {
    display: none;
    height: 2px;
    left: 35px;
    padding: 0;
    position: absolute;
    /*top: 48px;*/ //change this
  top: 40px;
    padding-top:8px;
    width: 940px;
}

---