I have been struggling with creating this navigation bar for weeks now and I keep running into issues.
What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the right. When the cursor moves off of either the primary or secondary navigation, the secondary menu should disappear.
You can view this in action at
Below is the HTML code I am using:
<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="#">Categories</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>
And here is the CSS code:
.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;
}
Lastly, I am using the following jQuery code:
$(document).ready(function(){
$('.headerNav li.primary-nav-item').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
I also have two additional divs below the navigation bar. Could these be causing any issues with the display? How can I get the navigation bar to overlay these divs?
<div class="headerDropShadow"></div><!--headerDropShadow-->
<div class="contentWrapper">
<div class="content" id="content">
<div class="topContent"></div><!--topContent-->
</div>
</div>
And here is the corresponding 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 assistance with this ongoing issue would be greatly appreciated.
Thank you in advance, J