Question

I have been trying to build this nav for weeks now and something always go wrong.

What I am trying to do is have primary-nav and when you over over the primary-nav, the secondary-nav will appear below it and a little to the right. If you hover off the primary-nav or secondary-nav, the secondary-nav will display:none.

You can see this at http://willruppelglass.com/index.php

Here is my HTML

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>

<li class="primary-nav-item"><a href="#" class='galleryNavToggle'>Gallery</a>
<ul style="display:none;">
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</li>

<li class="primary-nav-item"><a href="#" class='galleryNavInfoToggle'>Info</a>
<ul style="display:none;">
<li><a href="#">F.A.Q.</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Artist Bio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>

</ul>
</div>

MY CSS

.headerNav{
    color:#000;
    margin:0 auto;
    width: 1280px;
    padding-top: 148px;
}

.headerNav ul{
    list-style-type:none;
    margin:0;
    padding:0 0 0 8px;
}

.headerNav li{
    float:left;
}

.headerNav ul a{
    font-size:24px;
    color:#FFF;
    display:block;
    padding:0 55px 0 0;
    text-decoration:none;
    text-transform:capitalize;

}

.headerNav ul a:hover{
    color:#a40404;
    text-decoration:none;
}

.headerNav ul ul li {
    float: left;   
}

.headerNav ul ul a {
    font-size: 16px;
    display:block;        
}

JQUERY

$(document).ready(function(){
        $('.headerNav li.primary-nav-item').hover(
            function() { $('ul', this).css('display', 'block'); },
            function() { $('ul', this).css('display', 'none'); });
    });

Other notes, I have two divs below the nav, which could why its not displaying, can I get it to overlay those divs?

<div class="headerDropShadow"></div><!--headerDropShadow-->

<div class="contentWrapper">
<div class="content" id="content">
<div class="topContent"></div><!--topContent-->
</div>
</div>

and their respected CSS

.headerDropShadow{
    background:url(../images/headerShadow.jpg) repeat-x;
    width:100%;
    height:49px;
}

.topContent{
    background:url(../images/topContent.jpg) repeat-x;
    width: 992px;
    height:50px;
    margin:0 auto;
    position:relative;
}

Any help at all would be great as this as been an issue for a loooooong time.

Thanks in advanced,
J

Answer 1

.headerNav li ul {
    position: absolute;
    z-index: 999;
}

I would also recommend using .clearfix hack for the parent ul element. More info about clearfix here: http://nicolasgallagher.com/micro-clearfix-hack/.
In jquery try to use .toggle(), just because it need less code ^^.