fmz 14

I have a dropdown navigation bar that works normally in all major browsers. When you mouse over it the drop down menus appear properly. However in IE7 they drop behind the image, text and controls of the news section below it.

Here is the site: http://dev.southernlivingplants.com.

I have tried any number of z-index values on every possible item, so I come for help.

I would appreciate any assistance you might offer!

Thanks.

Here is the code for the navigation:

<ul id="nav-one" class="dropmenu"> 
    <li> 
        <a href="{site_url}the_collection">the collection</a> 
        <ul> 
            <li><a href="{site_url}shrubs/">shrubs</a></li> 
            <li><a href="{site_url}groundcovers_grasses/">groundcovers / grasses</a></li>
            <li><a href="{site_url}trees/">trees</a></li> 
            <li><a href="{site_url}tropicals/">tropicals</a></li>
            <li><a href="{site_url}fall_bulbs/">fall bulbs</a></li>
            <li><a href="{site_url}spring_bulbs">spring bulbs</a></li>
            <li><a href="{site_url}annuals/">annuals</a></li>
            <li><a href="{site_url}perennials">perennials</a></li>
        </ul> 
    </li> 
    <li><a href="{site_url}find_your_zone">find your zone</a></li>  
    <li><a href="{site_url}in_the_garden/">in the garden</a>
        <ul>
            <li><a href="{site_url}care_tips/">care tips</a></li>
            <li><a href="{site_url}color_guide/">color guide</a></li>
            <li><a href="{site_url}common_pests/">common pests</a></li>
        </ul>
    </li>
    <li><a href="{site_url}where_to_buy">where to buy</a></li>
    <li> 
        <a href="#">about us</a> 
        <ul> 
            <li><a href="{site_url}history">history</a></li> 
            <li><a href="{site_url}media_room/">media room</a></li> 
            <li><a href="{site_url}events">events</a></li>
            <li><a href="{site_url}botanical_gardens">botanical gardens</a></li>
            <li><a href="{site_url}testimonials">testimonials</a></li>
        </ul> 
    </li> 
    <li><a href="{site_url}contact_us">contact us</a></li>          
</ul>

Here is the css for the navigation:

ul.dropmenu {

    height:29px;
    width: 730px;
    float: left;
    position: relative;
    top: 41px;
    margin: 0px; 
    padding: 0px;
    background-color: #80a4b6;
    display:block;
    z-index: 1000; 
    list-style-image: none; 
    list-style-type: none; }

.dropmenu li a, .dropmenu li{
    font-size: 15px;
    float: left;
}
.dropmenu li a:hover, .dropmenu li.open > a{
    color: #7fa3b5;
    background-color: #f8f2e3;  
    z-index: 400;
     }

.dropmenu li{
    list-style: none;
    position: relative; 
    top: 1px;
}

.dropmenu li span{
    display: block;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 12px;
    right: 10px;
    background:url("../photos/arrow_up.png") repeat-x scroll 0 0 transparent;
}
.dropmenu li a:hover span, .dropmenu li.open > a span{
    background-color: #f8f2e3;  
}

.dropmenu li a, .dropmenu li div{
    padding: 6px 15px 6px;
    text-decoration: none;
    color: #FFF;
}

/* Submenu */
.dropmenu li > ul, .dropmenu li > div {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #f8f2e3;
    z-index: 500;
}

.dropmenu li:hover > ul, .dropmenu li:hover > div{
    display: block;
    z-index: 500;
}

.dropmenu li ul li, .dropmenu li ul li a{
    float: none;    
    color: #7fa3b5;
    text-transform: none;
}

.dropmenu li ul li{
    _display: inline;   
}

.dropmenu li > div{
    width: 200px;
}


/* Sub submenu */

.dropmenu li ul li a{
    width: 150px;
    display: block; 
    border:1px solid #7fa3b5;
    border-top: none;
    z-index: 1000;
}

.dropmenu li ul li a:hover{
    color:#7fa3b5;
    background: #f8f2e3;
    text-decoration: underline;
}

.dropmenu li ul li ul, .dropmenu li ul li > div{
    top: 0px;
    left: 101%;
}

Here is the code for the home page news display:

<div class="wt-rotator"> 
        <div class="screen"> 

            <noscript> 
                <!-- placeholder 1st image when javascript is off -->
                <img src="http://dev.southernlivingplants.com/photos/news_img-1.jpg" alt=""/>
            </noscript> 

        </div> 
        <div class="c-panel"> 
            <div class="buttons"> 
                <div class="prev-btn"></div> 
                <div class="play-btn"></div>    
                <div class="next-btn"></div>               
            </div> 
            <div class="thumbnails"> 
                <ul> 

                    <li> 
                        <a href="http://dev.southernlivingplants.com/photos/news_img-1.jpg" title="Article Headline 1"><img src="http://dev.southernlivingplants.com/photos/thumbs/triworks_abstract261.jpg" alt=""/></a>                        
                        <div style="top:5px; left:505px; width:250px; height:0; font-size:12px; color:#54301A;"> 
                           <h1><a href="http://dev.southernlivingplants.com/article/article_headline_1">Article Headline 1</a></h1> 
                           Forrest ipsum no sed posse dicit, cum affert hendrerit suscipiantur in. Est an quod amet utroque, perpetua eloquentiam ea pri. In vim alii dicam disputationi. Mea ne dicat commune petentium, dicit utamur percipit nec id. Id velit semper fierent eum.
                           <p class="read-more"><a href="http://dev.southernlivingplants.com/article/article_headline_1">&raquo; more</a></p> 
                        </div> 
                    </li> 

                </ul> 
          </div>     
      </div> 
    </div><!-- end wt-rotator --> 

1 answer

danwellman 5600
2
points
This was chosen as the best answer

Have you tried putting a higher z-index on the menu's parent container? The fix is described here

Answered about 8 years ago by danwellman
  • To expand on this a bit, IE 7 resets the z-index value every time it see a new, non-static position set. So in your case, the sub menu's exist within the z-index 0 plane, even though they have a higher z-index set. The image, with a z-index of 1, will then sit on top of it. Ktash about 8 years ago
  • Hi Dan, Solve the problem. Thank you for sharing that obscure IE bug. Forrest fmz about 8 years ago
  • np :) danwellman about 8 years ago