Question

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

如果你在IE7中测试上面的链接（我使用IE9浏览器模式和IE7的浏览器兼容性），那么subnavs存在定位问题。

将鼠标悬停在我们身上，然后将鼠标悬停在家中，然后返回关于我们。您将看到子导航按其上方LI的宽度向右移动。

这纯粹是用CSS编写的。这在除了IE7之外的所有浏览器中都能很好地工作，我想在CSS中保持这个工作，没有任何Javascript修复。

我也有一个z-index问题，关于这两个问题的任何想法？

这是处理主UL和LI的CSS代码，以及处理第一个Subnav的CSS。（注意“迈克尔”下的次要子鼻孔按预期工作）。

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

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

Answer 1

问题在于您错误地使用了定位。

尝试这种方法。我评论了一些变化。

.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，两个定位问题

1 个答案: