html - CSS Drop down 在悬停时不会变得可见，但会在悬停时隐藏

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);
}