一段纯 CSS 实现的可用性导航下拉菜单代码,求解读

http://jsfiddle.net/cfWpE/

检测发现是 CSS 中 67~73 行的 margin-right:1px; 控制了下拉菜单的可见性。但还是云里雾里,希望能解读一下代码证二级菜单是如何隐藏的,又是如何触发显示的?

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
    margin-right:1px;
    background: black;
}
阅读 3.5k
评论
    1 个回答

    我把多余代码都删了,然后简化了代码。
    先解释一下目前的结构:
    1. 把 ul.menuoverflow:hidden去掉 , .wrapper 设为 margin-top:160px
    2. 现在剩下 about us 这个li,把它设为 绿色 , height: 120px
    3. "ul.menu li.listmargin 改为 -120px -125px 0px 0px (因为默认数字太大不方便看效果。)
    4. a 标签红色,margin-top 改为 120px(为了配合第三步)
    现在页面应该成现在这样(如果我没有漏写什么的话)
    图

    所以现在把鼠标放上a标签,执行了"margin-right:1px;",就是把右边ul挤下去了
    请输入图片描述

    现在我把"ul.menu li.list"设为251px,鼠标再放上去,就可以看到我画黑线处的1px边距,ul就不会掉下去。
    请输入图片描述

    这里的显示会由于高度限制造成闪动,可以戳入 jsfiddle.net/younglaker/cfWpE/135/ test

    我现在把源代码按照上面的方法减小数据、把背景设透明,就显而易见了。 请输入图片描述

      撰写回答

      登录后参与交流、获取后续更新提醒