IE7 Subnav, two positioning issues

问题

Site in question: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

If you test the above link in IE7 (I am using IE9 with browsermode and browser compatability for IE7), there is a positioning problem with the subnavs.

Hover over about us, then hover over home, and then go back to About us. You will see the sub-nav has moved to the right by the width of the LI above it.

This is coded purely in CSS. This works perfectly in all browsers except for IE7, I would like to keep this working within CSS, without any Javascript fixes.

I also have a z-index issue, any ideas on these two issues?

Here is the CSS code that handles the main UL and LI, as well as the CSS that handles the first Subnav. (note the secondary subnav under "Michael" works as intended).

***Note that the class .main-nav is applied to the first UL that handles the horizontal bar. The class .main-sub-nav is applied to the UL that holds the subnav LI's Michael, Kenny etc. under the About us menu.

nav .main-nav {
    position: absolute; /* allows us to absolute position the subnavs */
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
    border: 1px solid #fff; /* Inner white border */
    -moz-border-radius: 5px; /*rounded edges */
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

nav ul > li {
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

/* MAIN NAV SUBNAV STYLES */

.main-sub-nav { /* BASIC STYLING PLUS HIDE */
    position: absolute;
    display: none;
    z-index: 1;
    width: 200px;
    height: auto;
    top: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > .main-sub-nav { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li .main-sub-nav li {
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

回答1:

The thing is that you are incorrectly using positioning.

Try this approach. I have commented few changes.

.row.margin-bottom-15.nav-container { /* Remove overflow:hidden; so your dropdowns will be shown when they overflow. */}

nav .main-nav {
    /* removed position:absolute; */
    display: block;
    width: 100%;
    height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

nav ul > li {
    position: relative; /* Add position:relative; so you can absolute position dropdowns */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}



.main-sub-nav { 
    position: absolute;
    display: none;
    z-index: 1;
    width: 200px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > .main-sub-nav { 
    display: block;
}

nav ul li .main-sub-nav li {
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

Let me know if it helped.

来源：https://stackoverflow.com/questions/14533096/ie7-subnav-two-positioning-issues

标签

css

internet-explorer-7

z-index