CSS下拉将不会在悬停时显示，但会在悬停时隐藏

Question

我正在尝试创建一个悬停下拉菜单。我无法让它发挥作用。目前，我有显示的菜单，并在悬停时隐藏。我厌倦了只是切换可见和不可见，但这不起作用。我也尝试过改变显示，但是没有用（它搞砸了菜单的其余部分。）

/***************
menu_extend
***************/
nav ul li:first-child:hover + #menu_extend {

    visibility: hidden; 
}

#menu_extend ul {
    display: inline-block;
    position: absolute;
    width: 80px;
    left: 0px;
    top: 30px;
    background-color: rgba(0, 0, 0, .8);
}

http://jsfiddle.net/nZg7Q/

Answer 1

问题在于您设置的元素和属性不匹配。这种方式可行：

nav ul li:first-child:hover + #menu_extend ul {
    display: inline-block; 
}

#menu_extend ul {
    display: none;
    position: absolute;
    width: 80px;
    left: 0px;
    top: 30px;
    background-color: rgba(0, 0, 0, .8);
}