Css 悬停时显示div:div没有'；悬停不显示

我有以下代码：

#banner {-webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; border-top-left-radius: 100px; border-top-right-radius: 100px; position:relative;}
#submenu { color: #fff; margin: 0 2%; position: relative; bottom: -0px; text-align: center; font-family: Oswald; font-weight: 700; font-size: 15px; padding:3px; z-index:1; visibility:hidden; opacity:0; -webkit-transition:300ms; -moz-transition:300ms; -o-transition:300ms; transition:300ms; }
#banner:hover #submenu { visibility:visible; opacity:1; }

当我悬停

#横幅

ID时，

#子菜单

不会显示。我做错什么了吗

谢谢你的帮助

编辑：以下是HTML代码，如有必要：

<div id="banner"><div id="submenu">foo</div></div>

foo

检查以下内容： Div正在显示，但颜色的文本为白色，因此可能不可见。 在共享的小提琴中，我故意将其改为黑色，效果非常好

#banner {
    -webkit-border-top-left-radius: 100px;
    -webkit-border-top-right-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-topright: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: relative;
}
#submenu {
    color: black;
    margin: 0 2%;
    position: relative;
    bottom: -0px;
    text-align: center;
    font-family: Oswald;
    font-weight: 700;
    font-size: 15px;
    padding: 3px;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}
#banner:hover #submenu {
    visibility: visible;
    opacity: 1;
}

---

很好。然而，在JSFIDLE上，我不得不去掉

子菜单上的
颜色：#fff
。文本在白色背景上显示为白色，因此看起来不可见。