Chrome 中的 CSS 下拉菜单问题

Question

它在 FF 中的外观和效果:

它在 chrome 中的外观:

http://mindwuehle.de/ - 自己看看

我在处理当前元素时遇到了一个奇怪的问题。我正在使用 bootstrap 开发 wordpress 主题。该主题有一个带有菜单和子菜单的顶部导航栏。

但由于某种原因，第二个下拉菜单没有正确显示，部分内容被隐藏了。任何地方都没有那个大小的 div，还有“检查元素”我也无法弄清楚。

然而，最奇怪的部分是:当您从左侧移动到问题链接时，下拉列表会正确显示，如果您从右侧进入，它就会损坏。

我没有更改 bootstrap css 中的任何内容，所以我只会附上我自己的样式表和 html，因为很可能会在此处的某处发现错误:

html, body {
    height: 100%;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -120px;
}

/**
 * Global Styles
 */

a , a:hover, a:visited, a:focus, a:active{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

body{
    background: #fff;
}

header{
    background: #a31010;
    height: 100px;
    color: white;
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 24px;
}

p {
    text-align: justify;
}


i.button-overlay {
    position: absolute;
    margin: 8px;
    z-index: 1;
}

.nav-pills>li>a:hover {
    color: #000;
}

.if-ie {
    position: absolute;
    right:5em;
    width: 500px;
}

.close {
    font-size: 40px;
}

.form-search {
    margin: 20px auto;
    margin-bottom: 20px;
    width: 210px;
}

.page-header {
    margin-top:0px;
    border-bottom: 0px; 
    margin-left:0px;
}

.page-header a{
    color: white;
}

.page-header a:hover{
    text-decoration: none;
}


li.widget {
    list-style-type: none;
}

#page-content {
    -webkit-box-shadow: 0px 1px  1px 1 rgba(0,0,0,.5);
    -moz-box-shadow: 0px 1px  1px   rgba(0,0,0,.5);
    box-shadow: 0px 1px  1px   rgba(0,0,0,.5);
    background-color: #fff;
    margin-top: -10px;
    z-index: 3;
}

/**
* Desktop Navigation, issue may be here somewhere
*/
.navbar .nav>li>a.issue{
    color: red;
}

.navbar{
    -webkit-box-shadow: 0px 1px  20px 1 rgba(0,0,0,.5);
    -moz-box-shadow: 0px 1px  20px   rgba(0,0,0,.5);
    box-shadow: 0px 1px  20px   rgba(0,0,0,.5);
}

.nav {
    width: 100%;
}

.navbar ul ul {
    position: absolute;
    top:-99999999px;
    opacity: 0;
    background-color:#f8f8f8;
    color:#000;
    text-align: left;
    box-shadow: 2px 2px 0 #b5b5b5;
    list-style-type: none;
    margin-left: 0;
}

.navbar ul li:hover > ul{
    position: absolute;
    top:100%;
    opacity: 1;
    border-top: 1px solid #a7a7a7;
    z-index: 3;
}

.navbar .navbar-inner {
    padding: 0;
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    background-color:   #d6d4bb;
    background-image: -moz-linear-gradient(top, ##d6d4bb, ##c3c09c);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(##d6d4bb), to(##c3c09c));
    background-image: -webkit-linear-gradient(top, ##d6d4bb, ##c3c09c);
    background-image: -o-linear-gradient(top, ##d6d4bb, ##c3c09c);
    background-image: linear-gradient(to bottom, ##d6d4bb, ##c3c09c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='##d6d4bbf', endColorstr='#ff#c3c09c', GradientType=0);
    border: 1px solid #d4d4d4;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);
}

.navbar ul ul a {
    width: 160px;
    line-height: 40px;
    padding: 0 20px;
    display: block;
}

.sub-menu a {
    border-right:0px;
}

.sub-menu ul.sub-menu{
    margin-left:5px;
}

ul.nav ul.sub-menu li {
    display:block;
    z-index: 3;
}

ul.nav ul.sub-menu li:hover > ul{
    position: absolute;
    top:0px;
    opacity: 1;
    left:197px;
    border-top: 0px;
}

ul.nav ul.sub-menu a{
    text-align: left;
}
.navbar ul li {
    position: relative;
    float:left;
}

.navbar .nav {
    -webkit-margin: 0;
    -moz-margin:-10px 0 0;
}
.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}
.navbar .nav li a{
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
}

ul.sub-menu li a {
    color: #777777;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}

ul.sub-menu li a:hover {
    color: #a31010;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
}

.navbar .nav li:first-child a {
    border-left: 0;
}
.navbar .nav li:last-child a {
    border-right: 0;
}

ul.sub-menu li a:hover {
    background-color: #e3e3e3;
}

/******** End of Navigation **********/

.item img{
    width: 100%;
}

.media{
    padding: 15px;
    border-bottom: 3px solid #e5e5e5;
}

.nav-pills>.active>a, .nav-pills>.active>a:hover, .nav-pills>.active>a:focus {
color: #ffffff;
background-color: #a31010;
}


.hero-unit {
        padding:0;
    }

HTML: 导航问题 × 警告! 您使用的是旧浏览器。要正确浏览本网站，请使用更新版本的 Chrome 或 Firefox。

Answer 1

我解决了。

问题有点出在代码上，但仍然只有 Windows Chrome 无法正确显示它。

我改变了:

.navbar ul ul {
    position: absolute;
    top:-99999999px; /*Change here */
    opacity: 0;
    background-color:#f8f8f8;
    color:#000;
    text-align: left;
    box-shadow: 2px 2px 0 #b5b5b5;
    list-style-type: none;
    margin-left: 0;
}

到

.navbar ul ul {
position: absolute;
top:-99999px; /*Change here */
opacity: 0;
background-color:#f8f8f8;
color:#000;
text-align: left;
box-shadow: 2px 2px 0 #b5b5b5;
list-style-type: none;
margin-left: 0;
}

由于未知原因，Chrome 无法处理距离这么远的对象。无论如何，谢谢你们的帮助。