Slideshow is covering over drop-down menu

You can try setting a z-index in css for the slides. Something like z-index: -1; That should probably shove it behind the nice menus. I am using nice_menus and views slideshow and it seems to be working fine for me. You can look at it here: http://asucm.ucmerced.edu

For me, it didn't work until I also added "relative" to the style:

#divwithmenu  {
	z-index:10;
	position: relative;
}

This was for the zeropoint theme.

I've just noticed this on a site I'm working on. I've also noticed that if there are, say, 6 items in the slideshow, the z-index is set to 6 for each of them except the one that's currently showing, which is set to 7. Similarly, if there are only 3 items, they are all set to 3 except the one that's showing which is 4.
As Nice Menus sets it's z-index at 5, the 6-item slideshow overlaps it, whereas the 3-item slideshow doesn't...

Why has Views Slideshow been coded this way? Could we not simply make each slideshow item have a z-index of 1, then have the current item set to 2, rather than a z-index set to the number of items in the slideshow?

This is a jQuery cycle thing, the jQuery module we use to do the cycling. Views slideshow does nothing to set the z-index. I'm sorry, but I can't really fix it.

redndahead,
Because IE 6 is STILL a popular browser, my company has to support it.
Whenever we launch a site, all functionality must work in IE6.
Fortunately, it doesn't have to be pixel perfect, but it must work.
I'm noticing this 'covering' issue in IE6 and can't figure it out.
I see on your site you posted in #2 that it also doesn't work.
The menus don't 'cover', but the layout is b0rked.
There has to be a solution, no?
I don't have this problem in any browser other than IE6.
peace,
michael

I'm not completely sure what to do for IE 6. The site I posted was our first site that we decided to not support IE6. Maybe take a look here. http://www.last-child.com/conflicting-z-index-in-ie6/

Marking as won't fix. If someone has created a viable solution please feel free to post it.

ul.nice-menu,
ul.nice-menu ul {
  border-top: 0px;
  z-index:9999999999;
}

#views_slideshow_singleframe_main_1 div { z-index:1; }

This should fix it.

Thanks for adding the code to the issue, but this is still a won't fix as this should be added to the users theme.

#5 worked for me!

#5 also worked for me, but only if I set the CSS to a div containing the nice menus. Setting them on my ul.nice-menu didn't work for some reason.

Thanks to everyone who has posted already. I have read through every comment in this and other threads pertaining to this issue and have tried every possible fix - but my nice menus are still being covered up by the views slideshow in IE7. Firefox and Safari are fine.

Numerous hours spent referencing other sites with similar setups, trying every possible combination of changes, but two days later I'm still unable to fix this. After pulling out most of my hair, I thought it was about time to suck it up and seek help! I would be greatly appreciative of any insight you could lend!

I have a total of 10 slides and firebug reports a z-index: 11 for the div that contains the currently displayed slide. Between slides I can see the drop-down menu for a fraction of a second.

I have set the nice menus and all immediate containing divs to z-index: 1000. In addition, I have set the containing divs to position: relative.

I am using the most recent Dev version of nice_menus and I have tried both the dev and current versions of views_slideshow.

I apologize for resurrecting this issue as it's likely I have just overlooked something small. Perhaps I have the wrong containing div set to position: relative or z-index: 1000. If it were a z-index issue, would it not affect Firefox and Safari as well?

I'm using the 960.gs framework and have the nice menus in a block region:

		<div id="nav" class="grid_8">
		  <?php print $header_nav?>
        </div>

Here is a copy of the resulting html for the nice menus (shortened up a bit):

	<div id="nav" class="grid_8">
			<div id="block-nice_menus-1" class="block block-nice_menus">
				<div class="content">
					<ul class="nice-menu nice-menu-down" id="nice-menu-1">
						<li class="menu-1407 menu-path-front active-trail first odd">
							<a href="/" title="" class="active">Home</a>
						</li>
						<li class="menu-440 menuparent menu-path-node-1 even">
							<a href="/" title="">About</a>
							<ul>
								<li class="menu-439 menu-path-node-1 first odd">
									<a href="./" title="">Background Info</a>
								</li>
								<li class="menu-1246 menu-path-node-19 even last">
									<a href="./" title="">Area Info</a>
								</li>
							</ul>
						</li>
						<li class="menu-442 menuparent menu-path-node-14 odd">
							<a href="./" title="">Services</a>
							<ul>
								<li class="menu-558 menu-path-node-14 first odd">
									<a href="./" title="">How We Can Help</a>
								</li>
								<li class="menu-927 menu-path-node-31 even">
									<a href="./" title="">Frequently Asked Questions</a>
								</li>
								<li class="menu-441 menu-path-node-2 odd last">
									<a href="./" title="Useful Links">Useful Links</a>
								</li>
							</ul>
						</li>
						<li class="menu-446 menu-path-node-13 odd last">
							<a href="./" title="">Contact</a>
						</li>
					</ul>
				</div>
			</div>
	</div>

I am using the default nice_menus .css, but have added some changes of my own (the relevant stuff):

#nav {
position: relative;
left: 0;
top: 20px;
overflow: visible;
z-index: 1000;
}

#block-nice_menus-1 .content {
	position: relative;
	z-index: 1000;
}

ul.nice-menu,
ul.nice-menu ul,
ul.nice-menu ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

Thanks in advance for taking a peek at this and I look forward to your advice. May the Drupal gods shine upon this thread!

EDIT: AHA! I managed to resolve this - finally! I tried what another thread in the nice_menus issue queue had suggested and continued to work my way up the containing divs and add z-index to each and every one. Somehow it resolved the issue! Doesn't make much sense to me, but for now I will let it be and hopefully my hair will begin to grow back. Thanks for letting me rant!

I had the same problem using drupal 6.16 and views slideshow 6.x 2.0
I had to do the following:

My Nice menu was inside a div called "navbar" like so:

<div id="navbar">
<!--Nice Menu Stuff-->
</div>

all i did was do the following in css:

#navbar{
position:relative;
z-index:999;
}

and it worked so i can confirm the bottom half of #16 after:
"I am using the default nice_menus .css, but have added some changes of my own (the relevant stuff):"
works... :)

None of these solutions worked for me, but it's because there is something more relevant that explains why z-index doesn't work apparently for no reason. It doesn't matter if you put a infinite z-index while there is a parent div that have "display:relative" because elements outside this parent would have higher z-index if are rendered later. z-index in IE is not absolute in the document but is relative to its parent div that has "display:relative" attribute.

Because I was using other template I didn't notice these "display:relative parents" however I didn't know about this issue.

So! if you use nice-menus and you're experiencing overlaping just make sure that the overlaping div is not outside the a div with "display:relative" which contains the "nice-menu" otherwise z-index won't work. If so, remove the "display:relative" form the div or put the overlaping content inside this div, and then use z-index as commented above.

Thanks all for your comments!

Thanks #18 works for me.

Took me forever to figure this out, but what I did was set my div#header to postion:relative and z-index:10 or higher. Header was my most outer div that contained the drop-down menu.

This is how my page was set up.

<div id="header">
Nice Menu or Super Fish Menu Here
</div>
<div id="content">
Views Slideshow Here
</div>

I have resolved this issue by adding "position: relative;" and "z-index: 1000;" to #header. I had something similar to :

...
<div id="page">
  <div id="header">
    ...
    <div id="block-nice_menus-1" class="....">
    ...
       <ul id="nice-menu-1" class="nice-menu ...">...</ul>
    ...
    </div>
    ...
  </div>
  <div id="main-wrapper">
    ...
  </div>
</div>

... style...
# main-wrapper {
  position: relative;
  ....
}

My mistake was when I was trying to set position and z-index to #block-nice_menus-1. It is necessary to set them at same level div as #main-wrapper. So in my case setting them to #header resolved the issue.
Good Luck!

Here is how I solved this issue in my specific circumstance.

DETAILS:
Date: 26 October 2011
Drupal core v6.22
Views Slideshow v6.x-2.3
Nice Menus v6.x-2.1
Garland Theme

1. Edit Line 426 of themes/garland/style.css, changing z-index from 2 to a higher number (I used 2000)

2. Go to the color configuration for the Garland theme and make a small change and re-save it. In my particular case, I am using a custom color scheme for Garland. This means that the .css file actually used by the site is generated after each change and is located in the files/color/garland/garland-xxxxx directory. So just changing the style.css is not enough to make the change take effect.

My thanks to previous comments on this thread and to the developers of FireBug. :-)

It happened to me in D7 and all other tricks failed except by adding the following lines to my css file
themes/zeropoint/css/style-zero.css

#views_slideshow_cycle_teaser_section_xxxxxxx-block_1,
.views-slideshow-cycle-main-frame  {
z-index:0;
}

I'm not using nice menus or the views slideshow and my pop-out menus are STILL hidden. I've tried all manner of z-index magic to try to bring this menu to the front but no go. Here's one (desperate) CSS combination I tried to get them in front. This problem occurs on all pages and again there is no javascript in the content area below it.

ul.menu li.leaf, ul.menu li, div#primary-menu, div#navbar, div#nav-bar, div#primary-menu-inner; {position:relative !important;z-index:1000 !important; }

I tried inspect element in chrome and tried z-index settings and even hid the content area below and this area is still cut off, it's like the height declaration of this primary links area has overflow hidden, but it doesn't. I'm a CSS pro and am surprised I haven't been able to nail this one.

Thanks for your help!

#24 Works for me in D7

#22 worked for me. I spent HOURS trying to figure out how to get this working. thank the gods for this thread.

#24 worked for me as well.

Using D6 zen theme & nice menus, this fixed it for me:

.block-nice_menus {
    z-index: 21;
}