我在我的模板中使用了 Bootstrap 的导航下拉菜单。该菜单一直显示在我的主导航菜单的左侧。如果您单击“文章”链接，您就会看到问题所在。我如何才能使下拉列表直接位于相应链接的下方？
这是导航的 html:
<nav>
<ul class="dropdown container">
<li><a href="?p=index-body">Home</a>
</li>
<li><a href="#">Forums</a>
</li>
<li><a href="#" data-toggle="dropdown">Articles</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="?p=article-single">Single Post</a>
</li>
<li><a href="?p=article-results">Results</a>
</li>
</ul>
</li>
<li><a href="#">Reviews</a>
</li>
<li><a href="#">Tutorials</a>
</li>
<li><a href="#">Resources</a>
</li>
<li><a href="#">About</a>
</li>
</ul>
</nav>
这是我文档的 CSS:
body {
background: url(../img/argyle.png) fixed;
font-family: Verdana;
font-size: 12px;
color: #999;
z-index: 1;
}
a:link, a:active, a:visited {
color: #b71f2f;
text-decoration: none;
}
a:hover {
color: #999;
}
header {
background: rgb(69, 72, 77);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(69, 72, 77, 1)), color-stop(100%, rgba(0, 0, 0, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=0);
/* IE6-9 */
}
header #toolbar {
background: #000;
border-radius: 5px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #666;
padding: 10px;
}
header #toolbar > ul.info {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
}
header #toolbar > ul.info > li {
display: inline-block;
border-right: 1px solid #666;
padding-right: 10px;
}
header #toolbar ul.info > li > a:link, header #toolbar ul.info > li > a:active, header #toolbar ul.info > li > a:visited {
color: #999;
text-decoration: none;
}
header #toolbar ul.social {
list-style: none;
margin: 0;
padding: 0;
float: right;
}
header #toolbar ul.social > li {
display: inline-block;
padding-right: 5px;
}
header #banner {
padding: 25px;
}
header #logo {
float: left;
}
header #logo a.logo {
background: url(../img/Logo.png) no-repeat;
width: 176px;
height: 80px;
margin: 0px;
padding: 25px 0;
display: block;
}
header #advert {
float: right;
}
header nav {
border-top: 1px solid #333333;
border-bottom: 1px solid #222222;
margin-top: 25px;
padding: 10px;
box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 1);
}
header nav > ul {
list-style: none;
padding: 0;
margin: 0px auto;
}
header nav > ul > li {
display: inline;
}
header nav > ul > li > a:link, header nav > ul > li > a:visited, header nav > ul > li > a:active, header nav > ul > li > a:hover {
color: #777;
font-size: 14px;
text-decoration: none;
text-shadow: 3px 3px 3px #454545;
margin-right: 15px;
padding: 10px 15px;
}
header nav > ul > li > a:hover {
color: #fff;
text-shadow: 3px 3px 3px #666666;
background: rgba(183, 31, 47, 0.25);
}
ul.dropdown-menu {
background: #111;
}
ul.dropdown-menu a:link, ul.dropdown-menu a:active, ul.dropdown-menu a:visited {
color: #666;
text-decoration: none;
}
ul.dropdown-menu a:hover {
color: #999;
text-decoration: none;
background: none;
}
.alert {
margin-top: 25px;
}
#content {
background: #151515;
border: 1px solid #333;
border-radius: 10px;
margin: 25px 0px;
padding: 15px;
min-height: 100%;
color: #666;
overflow: auto;
}
#bgSwitch {
background: #111;
border-radius: 5px;
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 20%;
z-index: 1000;
border: 1px solid #333;
text-align: center;
width: 200px;
}
#bgSwitch h1 {
font-size: 14px;
color: #333;
margin: 0px;
padding: 10px 0px;
}
#bgSwitch > ul {
list-style: none;
margin: 0;
padding: 0;
}
#bgSwitch > ul > li {
padding: 5px 0px;
width: 45%;
float: left;
display: inline;
box-sizing: border-box;
}
#bgSwitch > ul > li > img {
width: 32px;
height: 32px;
border: 1px solid #333;
border-radius: 3px;
}
.advert-blank {
width: 468px;
height: 60px;
padding: 10px;
background: #222;
text-align: center;
border: 1px solid #444;
}
.advert-blank p {
font-size: 12px;
margin: 0px;
padding: 10px 0;
color: #666;
}
ol.breadcrumb {
background: none;
color: #666;
padding-left: 0px;
margin-bottom: 0px;
}
ol.breadcrumb > li:before {
color: #666;
}
.page-header {
color: #666;
border-bottom: 1px solid #333;
margin-top: 0px;
}
.page-header > h4 > small {
color: #454545;
padding-left: 10px;
}
.page-header a {
color: #444;
text-decoration: none;
}
.page-header img {
padding-right: 10px;
}
.page-header p.description {
line-height: 25px;
letter-spacing: 2px;
}
.article p {
color: #666;
padding-bottom: 15px;
}
ol.result-list {
list-style: none;
margin: 0;
padding: 0;
}
ol.result-list > li {
padding-bottom: 10px;
border-bottom: 1px solid #333;
margin-left: 0;
}
ol.result-list p {
color: #333;
margin: 0;
}
ol.result-list img.img-thumbnail {
margin-right: 15px;
margin-bottom: 10px;
}
.left-border {
border-left: 1px solid #333;
}
a.carousel-control {
color: #fff;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 5px;
padding: 0px;
}
li.col-md-4 {
padding-left: 0;
}
.bottom-margin { margin-bottom: 25px; }
最佳答案
菜单元素 ul有position:absolute属性，所以你需要添加 position:relative在刚上li元素，请在您的 CSS 中再添加一个类。
li.open{
position: relative;
}
Demo link
关于jquery - 为什么我的 Bootstrap 下拉菜单错位了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26081131/