Как плавать div вверх?

Question

У меня есть меню и подменю в разных div. Между ними есть пространство. Как я могу сделать их похожими на одно целое меню? Я использовал bootstrap navbar для главного меню и простой nav для подменю. Я очень новичок в css. это то, что у меня есть:

<div class="navbar navbar-inverse"> 
    <div class="navbar-inner"> 
    <a class="brand" href="#">Website Logo</a> 
    <ul class="nav"> 
     <li class="active"><a href="#">DashBoard</a></li> 
     <li><a href="#">Docs</a></li> 
     <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account<b class="caret"></b></a> 
     <ul class="dropdown-menu" style="width: 250px;"> 
      <li><a href="#">Dashboard</a></li> 
      <li><a href="#">LogOut</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 
<div> 
<ul class="nav nav-pills"> 
    <li class="active"> 
    <a href="#">Stats</a> 
    </li> 
    <li><a href="#">Api Calls</a></li> 
    <li><a href="#">Settings</a></li> 
</ul> 
</div> 

jsfiddle
Я просто хочу, чтобы удалить пространство между ними.

И еще один маленький вопрос:
Как я могу избавиться от небольшой каретки между кнопкой и ее выпадающим списком? (Белый треугольник между пунктом нав счета, и это выпадающий)

Answer 1

Ваш первый вопрос можно ответить путем удаления по умолчанию margin-bottom для класса навигационной панели:

.navbar { 
    margin-bottom:0 
} 

Теперь, для второго Ques Тион. В раскрывающемся меню есть треугольник, созданный с использованием границ. Вы можете отключить это с помощью этого css:

.navbar .nav > li > .dropdown-menu:after { 
    border:none; 
} 

Answer 2

Добавьте следующий CSS, чтобы удалить поля:

.navbar{ 
    margin:0px; 
} 

JS скрипку:http://jsfiddle.net/eszf7/3/