Sliding Drop-Down List Menu Problem

[Aerden]

Hey everyone! I'm making a horizontal navigation bar using jQuery. I want to have the drop-down menu slide down ( slideDown() ) except the drop-down menu appears on top of instead of behind the main menu before sliding into the correct position.

Here is the HTML:

<div id="navigation">
  <ul class="top">
    <li><a href="../news/index.php">Home</a></li>
    <li><a href="../about/index.php">About Us</a>
      <ul class="sub">
        <li>Our Teams</li>
      </ul>
    </li>
    <li><a href="../events/index.php">Events</a></li>
    <li><a href="../gallery/index.php">Media</a></li>
    <li><a href="../contact/index.php">Get Involved</a>
      <ul class="sub">
        <li>Volunteering</li>
      </ul>
    </li>
  </ul>
</div>

Here is the external CSS file:

#navigation {
	margin: 0;
	border-top: 5px solid #AAAAAA;
	border-bottom: 1px solid #AAAAAA;
	padding: 0;
	width: inherit;
	height: 45px;
	background: #999999 url(../images/navigation.jpg) repeat-x;
}

#navigation ul.top {
	margin: 0;
	border: 0;
	padding: 0;
	width: inherit;
	height: 45;
}
	
#navigation ul.top > li {
	display: inline;
	float: left;
	margin: 0;
	border: 0;
	padding: 13px 30px; 
	font-size: 17px;
	font-weight: bold;
}

#navigation ul.top > li:hover {
	background: url(../images/nav_hover.jpg) repeat-x;
}

#navigation ul.sub {
	display: none;
	position: absolute;
	margin-top: 13px;
	margin-left: -30px;
	border: 0;
	padding: 0;
	background: #666666;
	list-style: none;
	z-index = 90;
}

#navigation ul.sub > li {
	margin: 5px 10px;
	border: 0;
	padding: 0;
	font-size: 13px;
}

And here is the external jQuery file:

function mouseOver(){
	$(this).find("ul").slideDown();
}

function mouseOut(){
	$(this).find("ul").slideUp();
}

$(document).ready(function(){
	$("#navigation ul > li").hover(mouseOver,mouseOut);
});

Thanks in advanced for the help! Let me know if you need to see more information than this.

[iBrandon318]

This May Help.

http://dynamicdrive.com/dynamicindex...owncontrol.htm

[Aerden]

Thanks for the link, but I'm looking for a sliding effect. I can get it to appear using the show() function fine, but when using the slideDown() function is the problem.

[jaysantos]

I think it may have to do with your Z-index in your CSS. Unfortunately without a full source, its pretty much like stabbing in the dark. A link to your source is always helpful to get a full picture of the issue.

Jaysantos

[Aerden]

Here is a link to the website:

http://www.uwo.ewb.ca/test/layout/layout.php

[jaysantos]

Try adding this to your #navigation

display: inline;



Your page looks good in Firefox, but there is a noticeable issue in IE.

Tell me if that works.