您好，我遇到了这个麻烦：我的标题中有两个部分，但是当我将下拉菜单放入导航部分时，它会像这样使我的标题崩溃：
如果我使用绝对位置，我的下拉菜单将移出 div 并在不同的显示器上看起来不同。
也许我解释得不好，所以我会给出我想要的图片：
和下面的导航部分。
这是我的 HTML：
<div class="container">
<div class="navbar ">
<div class="container">
<div class="top">
<div class="img">
<a href="#" id="facebook" title="facebook"></a>
<a href="#" id="linkedin" title="linkedin"></a>
<a href="#" id="youtube" title="youtube"></a>
</div>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">med@mail.com
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="display: none; ">
<li><a href="/users/edit.6">My Account</a></li>
<li><a href="/users/edit.6">Settings</a></li>
<li><a href="/users/edit.6">Analytics</a></li>
<li><a href="/users/sign_out" data-method="delete" rel="nofollow">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="white_line"></div>
<div class="grey_line"></div>
<ul class="nav pull-left">
<li><a href="/">Home</a></li>
<li><a href="/what_we_do">What we do</a></li>
<li><a href="#">My account</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
和我的 CSS：
.navbar .nav {
background-color: #f2f2f2;
float: left;
}
.navbar .nav > li {
padding-top: 0px;
}
.navbar-inner{
padding:0px;
width:960px;
}
.navbar .nav > li > a{
padding: 28px 25px 10px 0px;
}
.navbar .nav-pills > li > a{
padding-top:22px;
}
//top - top class with icons
.top{
height: 35px;
background: #c7dbaa;
}
.top .img:first-child{
margin-bottom:1px;
}
.top .img{
display:inline-block;
padding: 5px 0 0 5px;
}
.nav-pills{
//here I need to change positioning or something like that
}