Html 下拉菜单文本显示在背景之前

所以我用css3转换制作了一个带有下拉效果的菜单，但我的问题是，你实际上可以在背景显示之前看到文本，当然这个想法不是在背景之前看到文本

我做了一个j

Html:

---

只是不要更改

溢出

属性：

nav > ul > li:hover > ul {
  min-height: 110px;
  /*overflow: visible; Remove this*/
}

---

选中此项

我刚刚将不透明度添加到现有css中：

js小提琴：

nav > ul > li > ul {
    position: absolute;
    top: 50px;
    left: 0;
    height: 0;
    padding: 0;
    list-style: none;
    line-height: 20px;
    font-size: 17px;
    background-color: #30a0ff;
    overflow: hidden;
    opacity:0; /*newly added */
}

nav > ul > li:hover > ul {
    min-height: 110px;
    overflow: visible;
    opacity:1; /*newly added */
}

css:

nav > ul > li > ul {
    position: absolute;
    top: 50px;
    left: 0;
    height: 0;
    padding: 0;
    list-style: none;
    line-height: 20px;
    font-size: 17px;
    background-color: #30a0ff;
    overflow: hidden;
    opacity:0; /*newly added */
}

nav > ul > li:hover > ul {
    min-height: 110px;
    overflow: visible;
    opacity:1; /*newly added */
}

---

是的@Adrift我的错误我没有看到第一个tryThanks中的第二个子菜单，不知道为什么我没有想到：）

nav > ul > li > ul {
    position: absolute;
    top: 50px;
    left: 0;
    height: 0;
    padding: 0;
    list-style: none;
    line-height: 20px;
    font-size: 17px;
    background-color: #30a0ff;
    overflow: hidden;
    opacity:0; /*newly added */
}

nav > ul > li:hover > ul {
    min-height: 110px;
    overflow: visible;
    opacity:1; /*newly added */
}