§ ITPOW >> 文档 >> CSS

纯 CSS 打造标准的导航菜单-2

作者:vkvi 来源:ITPOW(原创) 日期:2008-9-11

本节我们要实现:鼠标移上去时,显示子菜单。

  • 将子菜单的 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 全部选择 提示:您可先修改部分代码,再按运行]

 

相关文章