本节我们要实现:鼠标移上去时,显示子菜单。
- 将子菜单的 position 设为 absolute,再用 left、top 将子菜单定位到看不见的地方,以实现隐藏。
- 然后响应 hover(鼠标移上去时),再利用 left、top 把子菜单定位到需要显示的地方,为了定位方便,在上级菜单项中设置 position 为 relative,这样 left、top 就是以上级菜单项为基准了。
核心代码
.navItem:hover
{
position:relative;
}
.navItem .subNav
{
position:absolute;
left:-9999px;
top:-9999px;
width:100px;
}
.navItem:hover .subNav
{
position:absolute;
left:0px;
top:13px;
width:100px;
}
全部代码
[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]