0
Я использую раскрывающийся список навигации Bootstrap в моем шаблоне. Меню отображается до конца в главном навигационном меню. Если вы нажмете ссылку «Статьи», вы увидите эту проблему. Как получить его, чтобы выпадающие списки были непосредственно под соответствующей ссылкой?Почему мое раскрывающееся меню 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; }