Demo link

Question

我在模板中使用Bootstrap的导航下拉列表。菜单一直显示在我的主导航菜单的左侧。如果你点击＆＃34;文章＆＃34;链接，你会看到问题。我如何获得它，以便下拉列表直接位于相应的链接下方？

这是导航的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; }

Answer 1

菜单元素ul具有position:absolute属性，因此您需要在position:relative元素的上方添加li，请在您的css中再添加一个类。

li.open{
 position: relative;
}

Demo link

Answer 2

只需修改您的DOM类：
JSFiddle

更改

<ul class="dropdown container">

要

<ul class="container">

将dropdown添加到<li>类

<li class="dropdown" ><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>

以下是 dropdown 的链接。顺便说一句，bootstrap是一个前端lib.It有很多模型单元。这些模型必须具有固定的DOM结构。

为什么我的Bootstrap Dropdown菜单不在位？

2 个答案:

Demo link