Dropdowns behind my javascript slideshow

Sniklewerks Peon

Messages:: 2

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

I have seen this problem before but I have no idea how to fix it.

My CSS dropdown menus are falling behind a javascript slideshow.

I managed to tweek the zindex for a submenu that now shows above the slideshow but for the life of me I can't get the main menu to do the same.

Its killing me.

I would be happy to provide you with any code you might need to determine the problem but want to put it all here until asked as it might be quite extensive.

If you need to see it, let me know.

The site I am working on is alumniunit dot com

Thanks,

Bruce

What the heck, your gonna need the code:

CSS

body {
background: #FFFFFF;
width: 990px;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #8F8E8E url(images/bg.gif) center repeat-y;
width: 990px;
margin: 0px auto 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited {
color: #2255AA;
text-decoration: none;
}

a:hover {
color: #CC0000;
text-decoration: underline;
}

/************************************************
* Top *
************************************************/

#top {
width: 990px;
height: 20px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

/************************************************
* Header *
************************************************/

#header {
background: #000000;
width: 960px;
height: 100px;
color: #000000;
font-size: 11px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

#header h1 {
color: #CCCCCC;
font-size: 24px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 0px;
padding: 25px 0px 0px 20px;
text-decoration: none;
}

#header h1 a, #header h1 a:visited {
color: #CCCCCC;
font-size: 24px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 0px;
padding: 0px;
text-decoration: none;
}

#header h1 a:hover{
color: #CCCCCC;
text-decoration: none;
}

#header p {
color: #FFFFFF;
padding: 0px 0px 5px 20px;
margin: 0px;
line-height: 20px;
}

#header a, #header a:visited {
color: #FFFFFF;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
padding: 0px 0px 0px 3px;
}

#header a:hover {
color: #FFFFFF;
text-decoration: underline;
}

.headerleft {
width: 420px;
float: left;
font-size: 14px;
margin: 0px;
padding: 0px;
}

.headerleft a img {
border: none;
margin: 0px;
padding: 0px;
}

.headerright {
width: 480px;
float: right;
margin: 0px;
padding: 5px 17px 0px 0px;
font-weight: bold;
text-align: right;
}

.headerright a img {
border: none;
margin: 0px 0px 3px 0px;
padding: 0px;
}

/************************************************
* Navbar *
************************************************/

#navbar {
background: #000000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #000000;
overflow: hidden;
z-index: 100;
}

#navbar a, #navbar a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#navbar a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navbarleft {
width: 960px;
margin: 0px;
padding: 0px;
}

#navbarright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 4px 10px 0px 0px;
}

#navbarright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000;
}

#nav a:hover {
background: #333333;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

/************************************************
* Subnavbar *
************************************************/

#subnavbar {
background: #2B74B4;
width: 960px;
height: 27px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
border-top: 2px solid #d70d17;
border-bottom: 1px solid #2B74B4;
z-index: 1;
position:relative;
}

#subnav {
margin: 0px;
padding: 0px;
list-style: none;
}

#subnav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#subnav a, #subnav a:visited {
background: #2B74B4;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 6px 15px 6px 15px;
border-bottom: 1px solid #2B74B4;
border-left: 1px solid #2B74B4;
border-right: 1px solid #2B74B4;
}

#subnav a:hover {
background: #FFFFFF;
color: #2255AA;
display: block;
text-decoration: none;
margin: 0px;
padding: 6px 15px 6px 15px;
border-bottom: 1px solid #2B74B4;
border-left: 1px solid #2B74B4;
border-right: 1px solid #2B74B4;
}

#subnav li {
float: left;
margin: 0px;
padding: 0px;
}

#subnav li li {
float: left;
margin: 0px;
padding: 0px;
width: 160px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #FFFFFF;
color: #2255AA;
width: 160px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #2B74B4;
border-left: 1px solid #2B74B4;
border-right: 1px solid #2B74B4;
}

#subnav li li a:hover, #subnav li li a:active {
background: #DDDDDD;
color: #2255AA;
}

#subnav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#subnav li:hover ul {
left: auto;
display: block;
}

#subnav li:hover ul, #subnav li.sfhover1 ul {
left: auto;
}

/************************************************
* Homepage *
************************************************/

#homepage {
float: left;
width: 610px;
margin: 0px;
padding: 10px 0px 0px 0px;
}

#homepage p {
margin: 0px;
padding: 0px 0px 15px 0px;
}

#homepage p img {
border: none;
float: left;
margin: 0px 0px 10px 0px;
}

#homepage ul {
list-style-type: square;
margin: 0px;
padding: 0px 0px 15px 0px;
}

#homepage ul li {
list-style-type: square;
margin: 0px 0px 0px 20px;
padding: 0px;
}

.hppostmeta {
width: 270px;
font-size: 11px;
margin: 0px 0px 15px 0px;
padding: 5px 0px 10px 0px;
border-bottom: 1px dotted #C0C0C0;
font-weight: bold;
}

#homepageleft {
float: left;
width: 310px;
margin: 0px;
padding: 0px;
}

.main {
background: #FFFFFF;
float: left;
width: 590px;
margin: 0px 0px 10px 0px;
padding: 13px 10px 0px 10px;
}

.featured {
background: #FFFFFF;
float: left;
width: 290px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
}

#homepageright {
float: right;
width: 290px;
margin: 0px;
padding: 0px;
}

#homepageright p {
padding: 0px;
margin: 0px;
}

.section {
background: #FFFFFF;
float: right;
width: 270px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
}

.thumb {
background: #FFFFFF;
float: right;
width: 270px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
}

/************************************************
* Content *
************************************************/

#content {
width: 940px;
margin: 0px auto 0px;
padding: 0px;
line-height: 17px;
z-index:-1;
}

#content h1 {
color: #000000;
font-size: 22px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px;
padding: 0px 0px 10px 0px;
line-height: 24px;
}

#content h1 a, #content h1 a:visited {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px;
}

#content h1 a:hover {
color: #2255AA;
text-decoration: none;
}

#content h2 {
color: #000000;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 10px 0px;
padding: 0px;
}

#content h2 a, #content h2 a:visited {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px 0px 10px 0px;
}

#content h2 a:hover {
color: #2255AA;
text-decoration: none;
}

#content h3 {
color: #000000;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 10px 0px;
padding: 5px 0px 10px 0px;
}

#content h3 a, #content h3 a:visited {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px 0px 10px 0px;
}

#content h3 a:hover {
color: #2255AA;
text-decoration: none;
}

#content h4 {
color: #000000;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 10px 0px;
padding: 0px;
}

#content img.wp-smiley {
float: none;
border: none;
margin: 0px;
padding: 0px;
}

#content img.wp-wink {
float: none;
border: none;
margin: 0px;
padding: 0px;
}

#contentleft {
float: left;
width: 610px;
margin: 0px;
padding: 10px 0px 10px 0px;
}

#contentleft p {
margin: 0px;
padding: 0px 0px 15px 0px;
}

#contentleft p img {
border: none;
float: left;
margin: 0px 10px 10px 0px;
padding: 0px;
}

#contentleft ul {
list-style-type: square;
margin: 0px;
padding: 0px 0px 15px 0px;
}

#contentleft ul li {
list-style-type: square;
margin: 0px 0px 0px 20px;
padding: 0px;
}

blockquote {
background: #E8E8E8;
margin: 0px 25px 15px 25px;
padding: 10px 20px 0px 15px;
border-top: 1px solid #DDDDDD;
border-right: 1px solid #666666;
border-left: 1px solid #DDDDDD;
border-bottom: 1px solid #666666;
}

#content blockquote p {
margin: 0px;
padding: 0px 0px 15px 0px;
}

.postarea {
background: #FFFFFF;
float: left;
width: 590px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 0px 10px;
}

.breadcrumb {
float: left;
width: 590px;
font-size: 11px;
margin: 0px 0px 20px 0px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

.date {
float: left;
width: 590px;
font-size: 12px;
margin: 0px;
padding: 0px;
}

.postmeta {
width: 590px;
font-size: 12px;
padding: 5px 0px 20px 0px;
margin: 0px;
border-top: double #EAEAEA;
}

.postmeta2 {
width: 590px;
font-size: 12px;
padding: 5px 0px 40px 0px;
margin: 0px;
border-top: double #EAEAEA;
}

.archive {
float: left;
width: 275px;
margin: 0px;
padding: 0px 0px 20px 0px;
}

.adsense-post {
background: #FFFFFF;
float: left;
width: 590px;
margin: 0px 0px 10px 0px;
padding: 20px 10px 20px 10px;
}

.comments {
background: #FFFFFF;
float: left;
width: 590px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 20px 20px;
}

Homepage Javascript code:

Slideshow

<div id="content">

<div id="homepage">

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>

<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="mypage1.html" title="open image" class="open"></a>
<img src="/wp-content/themes/revolution_magazine-30/SmoothGallery/images/april/tulips.jpg" class="full" />
<img src="/wp-content/themes/revolution_magazine-30/SmoothGallery/images/april/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Spring Break 2009</h3>
<p>Don't kid yourself, now is the time to start planning for next years party.</p>
<a href="http://alumniunit.com/?p=10" title="open image" class="open"></a>
<img src="/wp-content/themes/revolution_magazine-30/SmoothGallery/images/april/break.jpg" class="full" />
<img src="/wp-content/themes/revolution_magazine-30/SmoothGallery/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div>

Header Code:

Menus

<div id="wrap">

<div id="top">
<img src="<?php bloginfo('template_url'); ?>/images/top.gif" alt="Top" />
</div>

<div id="header">

<div class="headerleft">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('description'); ?>" /></a>
</div>



<div class="headerright">
<p><a href="<?php bloginfo('rss_url'); ?>"><img style="vertical-align:middle" src="<?php bloginfo('template_url'); ?>/images/rss.gif" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a href="<?php bloginfo('rss_url'); ?>">News Feed</a><a href="<?php bloginfo('comments_rss2_url'); ?>"><img style="vertical-align:middle;margin-left:10px;" src="<?php bloginfo('template_url'); ?>/images/rss.gif" alt="Subscribe to <?php bloginfo('name'); ?>" /></a><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments</a></p>
<a href="<?php $ad_url = get_option('revmag_ad_url'); echo $ad_url; ?>"><img src="<?php $ad_img = get_option('revmag_ad_img'); echo $ad_img; ?>" alt="Featured 468x60 Ad" /></a>
</div>

</div>

<div id="navbar">

<ul id="nav">
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_pages('title_li=&depth=2&sort_column=menu_order'); ?>
</ul>

</div>

<div id="subnavbar">

<ul id="subnav">
<?php wp_list_categories('sort_column=name&title_li=&depth=2'); ?>
</ul>

</div>