Загадочное пространство между двумя divs

Я создаю меню навигации HTML, которое отображается, когда происходит событие касания.Загадочное пространство между двумя divs

Между тем, что будет кнопкой для включения/выключения меню, а список меню - это пробел, от которого я не могу избавиться или даже понять, почему он там!

Что странно (для меня), если я добавлю границу 1px в блок списка, содержащий блок <div id="navContent"/>, пропасть исчезнет.

Я поставил демо CSS и HTML выпуска в jsfiddle по следующему адресу http://jsfiddle.net/ufvmj4n9/

#container { 
    position:relative; 
    top: 0px; 
    width:100%; 
    height:100%; 
} 
#mobileMenuBtn { 
    display: block; 
    position: relative; 
    opacity: 0; 
    width:290px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 0px; 
    background-color:#00F; 
    height:23px; 
} 
#navContainer { 
    display:block; 
    position: absolute; 
    top:95px; 
    width:100%; 
    height:auto; 
} 
#navContent { 
    /*border:1px solid green;*/ 
    position:relative; 
    top:0px; 
    height:350px; 
    width:290px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: rgba(51,102,204,0.8); 
} 
#navList { 
    position:relative; 
    top:30px; 
    list-style-type: none; 
    width:100%; 
    margin-left: 30px; 
    text-align: left; 
    padding:0; 
} 
.navText { 
    position: inherit; 
    display: list-item; 
    left:0px; 
    font-family: Verdana, "Trebuchet MS", Arial; 
    font-size: 1.1em; 
    font-weight: normal; 
    color: #FFF; 
    margin-bottom:30px; 
    outline: none; 
    text-align: left; 
} 
nav a { 
    text-decoration: none; 
} 


<div id="container"> 
    <nav id="navContainer"> 
     <div id="mobileMenuBtn" style="opacity: 1;"></div> 
     <div id="navContent"> 
      <ul id="navList"> 
       <li><a class="navText selectDisable" id="navItem5" tabindex="0" data-name="home">home</a></li> 
       <li><a class="navText selectDisable" id="navItem4" tabindex="1" data-name="solutions">solutions</a></li> 
       <li><a class="navText selectDisable" id="navItem3" tabindex="2" data-name="experience">experience</a></li> 
       <li><a class="navText selectDisable" id="navItem2" tabindex="3" data-name="equipment">equipment</a></li> 
       <li><a class="navText selectDisable" id="navItem1" tabindex="4" data-name="training">training</a></li> 
       <li><a class="navText selectDisable" id="navItem0" tabindex="5" data-name="contact">contact</a></li> 
      </ul> 
     </div> 
    </nav> 
</div>

я в первую очередь хотел бы знать, почему этот разрыв существует как я не могу найти запас, связанный с он (я использовал инструменты разработчика Chrome и Safari). Во-вторых, как лучше всего его удалить (я предполагаю (надеюсь) без отрицательного «верхнего» значения, применяемого к элементу id «navContent»).

Заранее благодарим за любую помощь.

источник

2014-08-26 user2190690