Take the 2-minute tour ×

I have "Awkward Showcase" running in my page, but above I have a dropdown menu. The thing is that the showcase overlaps the menu and it is not completely visible.

I could correct that changing z-index, but it only works when I put:

negative Index to Awkward Showcase

positive index to DropDown Menu

Because of this, as the showcase has arrows to navigate trough sliders, there is no way to click on each. It seems like they (arrows) arre behind a transparent layer, because they arre visible, but inactive.

My codes:


    <div id="navmenucontainer">
<ul id="navmenu">
    <li class="main" onclick="javascript: Mostrar(this);" id="menitem1"><a href="#" class="item">Productores</a>
        <div class="sub" onmouseout="setTimeout('Cierro(this)', 1000);" onmouseover="Sigue(this);" style="width:204px; overflow:hidden;">
         Some menu items


<div id="showcase" class="showcase">
                            <div class="showcase-slide">
                                <div class="showcase-content">
                                    <div class="showcase-content-wrapper">
                                       <img src="images/1.jpg">
                                <div class="showcase-caption">



#navmenucontainer {

*/ul#navmenu div.sub{
    display: none;
    background: url('images/menu/bgcat.png') repeat-x bottom #FFF;
    position: absolute;
    padding-bottom: 22px;
    /*border-right:1px solid silver;*/
    border:1px solid silver;

ul#navmenu li {
  margin: 0;
  /*border: 0 none;*/
  padding: 0;
  float:left; /*For Gecko*/
  display: inline;
  list-style: none;
  height: 20px;

ul#navmenu ul {
  margin: 0;
  padding: 0;

    position: relative;
    margin: 0;

The overlapping occurs with ".sub" div, and ".showcase".

share|improve this question
add comment

1 Answer

This is a longshot, but since it is IE after all... It could be either (almost)correct or disaster.. I have encountered the same problem, and it is a different solution every time depending on ones luck.. (IE sucks, just to quote and agree on the earlier comments)

Add this to your html

     <!--[if IE]>
<style type="text/css">

#navmenucontainer {

ul#navmenu {

ul#navmenu div.sub {

.showcase {
      position: relative;
      margin: 0;

Inspired from http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

share|improve this answer
With this solution, slider is overlapping menu in IE 7 –  Leandro Cusack Jun 1 '12 at 17:12
I am making an image of what I am getting –  Leandro Cusack Jun 1 '12 at 17:24
Try and replace the position in ´ */ul#navmenu div.sub{´ with relative, and as well add position relative to the other navmenu elements (ul.and li) add z index to them too. This is the most common fix on this well known bug. "Adding a ´position:relative´ to the part that is dropping down." this is because it has to be a value that is relative to its parent.. IE doesnt understand what to do elsewise. Z index 1000 = 0, unless position is relative.. Then zindex 1000 = 1000 more than the parent's. –  Just In Cache Jun 1 '12 at 18:01
It did not work. I do not know what to do, I am stucked since last month. Too much. –  Leandro Cusack Jun 11 '12 at 13:40
add comment

Your Answer


