Why is my Bootstrap Dropdown Menu Out of Position?

Question

I am using Bootstrap's navigation dropdown in my template. The menu appears all the way to the left side of my main nav menu. If you click on the "Articles" link, you'll see the problem. How do I get it so the dropdowns are directly below the appropriate link?

jsFiddle

This is the html of the nav:

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

This is my document's 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

menu element ul has position:absolute property, so you need to add position:relative in just upper li element, please add one more class in your css.

li.open{
 position: relative;
}

Demo link

Answer 2

Just modify your DOM class:
JSFiddle

Change

<ul class="dropdown container">

To

<ul class="container">

Add dropdown to <li> class

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

Here is a link for dropdown . By the way, bootstrap is a front end lib.It has many model unit. There is a must that these model have fixed DOM structure.