它在 FF 中的外观和功能：
它在 chrome 中的外观：
http://mindwuehle.de/ - 看看你自己
我在当前项目中遇到了一个奇怪的问题。我正在使用引导程序开发 wordpress 主题。该主题有一个带有菜单和子菜单的顶部导航栏。
但由于某种原因，第二个下拉菜单没有正确显示，部分被隐藏了。任何地方都没有这种大小的 div，而且“检查元素”我也无法弄清楚。
然而，最奇怪的部分是：当您从左侧移至问题链接时，下拉列表会正确显示，如果您从右侧进入，则它已损坏。
我没有更改引导 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：导航问题 ×</button> 警告！</h4> 您使用的是旧浏览器。要正确查看本网站，请使用较新版本的 Chrome 或 Firefox。</div>
</div>
</div>
</div>
</div>
</header>
<div class="hidden-phone">
<div class="navbar">
<div class="navbar-inner">
<div class="menu-main-nav-container">
<ul id="menu-main-nav" class="nav">
<li id="menu-item" class="menu-item menu-item-home">
<a href="#">Start</a>
</li>
<li id="menu-item" class="menu-item"><a class="issue" href="#">Issues here</a>
<ul class="sub-menu">
<li id="menu-item" class="menu-item "><a href="#">Link</a></li>
<li id="menu-item" class="menu-item "><a href="#">Link</a></li>
<li id="menu-item" class="menu-item "><a href="#">Link</a></li>
</ul>
</li>
<li id="menu-item" class="menu-item "><a href="#">Link</a>
<ul class="sub-menu">
<li id="menu-item" class="menu-item ">
<a href="#">Link</a>
</li>
<li id="menu-item" class="menu-item ">
<a href="#">Link</a>
</li>
<li id="menu-item" class="menu-item "><a href="#">Link</a>
<ul class="sub-menu">
<li id="menu-item" class="menu-item ">
<a href="#">Sub-Link</a>
</li>
<li id="menu-item" class="menu-item">
<a href="#">Sub-Link</a>
</li>
<li id="menu-item" class="menu-item">
<a href="#">Sub-Link</a>
</li>
</ul>
</li>
<li id="menu-item" class="menu-item">
<a href="#">Link</a>
</li>
</ul>
</li>
<li id="menu-item" class="menu-item ">
<a href="#">Link</a>
</li>
<li id="menu-item" class="menu-item">
<a href="#">Link</a>
</li>
<li id="menu-item" class="menu-item "><a href="#">Link</a>
<ul class="sub-menu">
<li id="menu-item" class="menu-item ">
<a href="#">Link</a>
</li>
<li id="menu-item" class="menu-item">
<a href="#">Link</a>
</li>
</ul>
</li>
<li id="menu-item" class="menu-item">
<a href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content" class="container">
<div class="row">
<div class="span8">
<div class="textwidget">
<div class="hero-unit well">
<h4>Call to Action Text</h4> <a href="#/" class="btn btn-success btn-small">more</a>
</div>
</div>
</div>
<div class="span4 randompic">
<div class="form-search">
<form method="get" class="input-append" id="searchform" action="#">
<input type="text" class="field span2" name="s" id="appendedInputButton" placeholder="enter text" />
<i class="icon-search button-overlay"></i><input type="submit" class="submit btn" name="submit" id="searchsubmit" value=" Search" />
</form>
</div>
<h4 class="widgettitle right ">Next events</h4><div class="" id=""><p>There are currently no events to display.</p></div>
</div>
</div>
<div class="row">
<div class="span8">
<h3><a href="#">Lorem ipsum Lorem ipsum</a></h3>
<h5>Date: 31. Mar, 2013 | Category: <a href="#" title="View all articles" rel="category tag">Article</a></h5>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="span4 sidebar">
<ul class="nav nav-pills">
<li class="active"><a href="#tab-one" data-toggle="tab">Recent entries</a></li>
<li><a href="#tab-two" data-toggle="tab">Articles</a></li>
<li><a href="#tab-three" data-toggle="tab">Events</a></li>
</ul>
<div id="home-tab-container" class="tab-content well">
<div class="tab-pane fade active in" id="tab-one">
<ul>
<li class="crpw-item">
<a href="#" rel="bookmark" title="Permanent link to Lorem ipsum" class="crpw-title">Lorem ipsum</a>
</li>
<li class="crpw-item">
<a href="#" rel="bookmark" title="Permanent link to Hello World!" class="crpw-title">Hello World!</a>
</li>
<li class="crpw-item">
<a href="#" rel="bookmark" title="Permanent link to Test number 2" class="crpw-title">Test number 2</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="tab-two">
<ul>
<li class="crpw-item">
<a href="#" rel="bookmark" title="Permanent link to Lorem ipsum Lorem ipsum" class="crpw-title">Lorem ipsum Lorem ipsum</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="tab-three">
<div class="" id="">
<p>There are currently no events to display.</p>
</div>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
</div>
<footer>
</footer>
</body>
</html>
如果能以某种方式解决这个问题，我会很高兴，我自己的想法也用完了......提前致谢！