css控制显示子菜单

Question

demo：
http://jsfiddle.net/k9fewaLL/

我想让鼠标在.nav-link上停留的时候，.dropbox就显示。
我想用css实现，不用js。
或许很基础，求别踩。
这个效果挺常见，但打开浏览器调试工具没看出怎么写的，比如这里有这个效果：http://www1.fang.com/ （顶部菜单）

Answer 1

:hover 只能在块元素里对子元素进行操作

.dropbox {
    display: none;
    position: absolute;
    top: 34px;
    z-index: 9;
}
.nav-item:hover .dropbox{
    display: block;
}

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="#">Link</a>
            <div class="dropbox">
                <a href="#">Action</a>
                <a href="#">Another action</a>
                <a href="#">Something else here</a>
            </div>
    </li>
</ul>

css的很多已经忘记了、不知道是否正常答案、希望对你有帮助

Answer 2

这个是很基础的CSS菜单栏设计，主要是使用hover和display两个属性来弄，有兴趣可以看一下这个旋转菜单栏的设计CSS3 3D旋转下拉菜单，应该有所帮助。

.nav-item a {
    text-decoration: none;
}

li.nav-item {
    list-style: none;
}

.dropbox {
    display: none;
}

li.nav-item:hover .dropbox {
    display: block;
}

.dropbox a {
    display: block;
    padding-left: 3px;
}