0

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

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

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

这纯粹是用 CSS 编码的。这在除 IE7 之外的所有浏览器中都能完美运行，我想在 CSS 中保持它的工作，而不需要任何 Javascript 修复。

我也有一个 z-index 问题，对这两个问题有什么想法吗？

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

***请注意，类 .main-nav 应用于处理水平条的第一个 UL。.main-sub-nav 类应用于在 About us 菜单下保存 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;
}
4

1 回答 1

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

让我知道它是否有帮助。

于 2013-01-26T09:37:57.073 回答