IE7 Subnav，两个定位问题 [英] IE7 Subnav, two positioning issues

问题描述

有问题的站点: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

如果您在IE7中测试上述链接(我正在使用具有IE7的浏览器模式和浏览器兼容性的IE9)，则子导航存在定位问题.

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.

将鼠标悬停在关于我们的上方，然后将鼠标悬停在首页上，然后返回至关于我们.您会看到子导航已向右移动了其上方LI的宽度.

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.

这完全是用CSS编码的.该功能在除IE7之外的所有浏览器中均能完美运行，我希望在CSS中保持该功能正常运行，而无需进行任何Javascript修复.

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.

我还有z-index问题，对这两个问题有什么想法吗?

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

这是处理主要UL和LI的CSS代码，以及处理第一个Subnav的CSS代码. (请注意"Michael"下的辅助子导航按预期工作).

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).

***请注意，.main-nav类适用于处理单杠的第一个UL. .main-sub-nav类适用于在关于我们"菜单下保存subnav LI的Michael，Kenny等的UL.

***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;
}

推荐答案

问题是您不正确地使用了定位.

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;
}

让我知道是否有帮助.

这篇关于IE7 Subnav，两个定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！