为什么我的div显示为"内联"？

更新: 为什么 div正在出现,比如何删除问题更重要.如果我不知道为什么div会按照他们的方式出现,我将无法理解div如何工作.

我有两个div人:menuContainer而且top,他们被另一个div叫做包裹topContainer.

我希望 menuContainer并且top在垂直方向上彼此相对,而不是在X角度下(并且我认为div是彼此出现的标准),但它们彼此叠加并且"内联".

这就是我的浏览器中的样子(是的,我是f5:ed,小提琴显示相同的东西):

menuContainer是水平CSS菜单的包装器.我希望它显示为白色区域顶部的标签top

为什么div显示为"内联"(查看hello所在的位置)以及如何编辑它看起来像我想要的那样？

body {
  background-color: #c2b074;
  color: #40371c;
  margin: 0px;
  font-family: Calibri;
}
/* Menu CSS */

#menuContainer {
  margin: 4em auto;
  background-color: #000000;
  width: 600px;
}
#navMenu {
  margin: 0px;
  padding: 0px;
}
#navMenu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  background-color: #d4cbab;
}
#navMenu li {
  display: inline;
}
#navMenu a {
  float: left;
  text-decoration: none;
  color: #40371c;
  width: 6em;
  padding: 0.3em;
  margin: 0 1.2em 0 0;
  background-color: #d4cbab;
  border-radius: 10px 10px 0px 0px;
}
#navMenu a:hover,
#navMenu a#cart:hover,
#navMenu a#contact:hover,
#navMenu a#home:hover {
  background-color: #efefef;
  color: #40371c;
}
#navMenu a#current {
  background-color: #efefef;
}
#navMenu a#contact {
  background-color: #d4cbab;
}
#navMenu a#cart {
  background-color: #6a6145;
  color: #c2b074;
}
#navMenu a#home {
  background-color: #40371c;
}
/* Top content CSS */

#top {
  clear: left;
  width: 650px;
  height: 100px;
  margin: 0 auto;
  background-color: #efefef;
  border-radius: 10px 10px 0px 0px;
}

  

    

      

        
	Home

        
        
	Contact

        
        
	Cart

        
      
    
  
  

    Hello