jQuery Help

[Rocker]

I have been changing my website around and using jquery to achive a dropdown navigation bar and a slide show effect.

However the slide show images appear to be on top of or taking presidance over the dropdown navigation bar and subsequently you cannot access then, I have only tested so far in IE and chrome; IE has a strange issue of not even displaying the dropdown bar sometimes.

To see what I mean visit the page and try the navigation drop down bars * there are only dropdown bars for IT Support and IT Security*, I should also note I have only setup the demo on the home page so far.



The jquery code I am using for the slide show is
The following css is applied to the images

div#advert
{
	width:950px;
	margin-left:auto; 
	margin-right:auto;	
	position:relative;
}

div#advert img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

The navigation menu is made up of the following code:


HTML

		<div id ="menuback">
			<div id="menucontainer">
			
			 <ul class="dropdown">
			 <div class="split"></div>
				<li><a href="index.html">Home</a></li>
				<div class="split"></div>
				<li class="top"><a href="about.html">About</a></li>
				<div class="split"></div>
				<li class="top"><a href="itsupport.html">IT Support</a>
					<ul class="sub_menu">
						 <li><a href="contract_support.html">Contract Support</a></li>
						 <li><a href="managed_service.html">Managed Service</a></li>
						 <li><a href="callout_support.html">Callout Support</a></li>
						 <li><a href="it_projects.html">Projects</a></li>

					</ul>
				</li>
				<div class="split"></div>
				<li class="top"><a href="itsecurity.html">IT Security</a>
					<ul class="sub_menu">
						 <li>
							<a href="penetration_testing.html">Penetration Testing</a></li>
						 <li><a href="security_policies.html">Security Policies</a></li>
						 <li><a href="endpoint_security.html">Endpoint Security</a></li>
						 <li><a href="network_security.html">Network Security</a></li>
					</ul>
				</li>
				<div class="split"></div>
				<li class="top"><a href="ithome.html">Home IT</a></li>
				<div class="split"></div>
				<li class="top"><a href="contact.html">Contacts</a></li>
				<div class="split"></div>
			</ul>
			</div>
		</div>

CSS

ul									{ list-style: none; }



/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      {color:white; width:98px; height:26px;  font-size: 12px; text-align:center; float: left; zoom: 1;}
ul.dropdown a:hover		            {display: block; color:white; width:98px; height:22px; padding-top:3px; font-size: 12px; text-align:center; text-decoration:none; background-image:url('gfx/navover.png'); background-repeat:no-repeat;}
ul.dropdown a:active                { background-image:url('gfx/navover.png'); background-repeat:no-repeat;}
ul.dropdown li a                    {display: block; color:white; width:98px; height:22px; padding-top:3px; font-size: 12px; text-align:center; text-decoration:none; }

ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background-image:url('gfx/navover.png'); background-repeat:no-repeat; color: white; position: relative; }
ul.dropdown li.hover a              { color: white; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 200px; height:26px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal;background-image:url('gfx/TitleBar.png'); background-repeat:repeat-x; color: white; 
									  float: none; width:200px;}
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; }

It might be a CSS issue with the slideshow images appearijng over the menu but i cannot work it out and unsure how to fix it.

Thnaks

 

[bigred]

It's the CSS z-index that defines the 'stack order' of elements on the page, nothing to do with the jQuery!

Take a look at the z-index: 8; that you've got in your CSS. If it's required for your slideshow to work, then set the z-index of the menu container to be a higher value.

Also if any of your website visitors use adblocking plugins, you'll probably find that your #advert div disappears, so rename it to something else.

 

[Tripnologist]

I haven't looked at your code, but going from the post above, I thought I would mention that you will also need to have the position set on the same elements as your z-index in order for it to work.

 

[Rocker]

It's the CSS z-index that defines the 'stack order' of elements on the page, nothing to do with the jQuery!

Take a look at the z-index: 8; that you've got in your CSS. If it's required for your slideshow to work, then set the z-index of the menu container to be a higher value.

Also if any of your website visitors use adblocking plugins, you'll probably find that your #advert div disappears, so rename it to something else.

Thanks for that, worked perfectly. Will change the advert name!