CSS垂直扩展元素并移动伪元素

Question

在我正在创建的网站上，我在页面顶部有一个导航栏，我希望在悬停时垂直展开/动画。我还使用：after 伪元素来创建功能区效果。问题是，当菜单项悬停时，我似乎无法使“功能区部分”向下移动。我已经玩了一段时间了，我知道这很简单，但我无法理解。

我在这里有关于pastebin的代码：http://pastebin.com/FTf4pBEi

Answer 1

我增加了悬停高度，色带似乎有效。因为没有子菜单项，所以我不确定你到底发生了什么。

http://jsfiddle.net/Kts5y/3/

.menu_item:hover {
  height:150px;
}