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

Question

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

Answer 1

我把多余代码都删了，然后简化了代码。
先解释一下目前的结构：
1. 把 ul.menu 的 overflow:hidden去掉 , .wrapper 设为 margin-top:160px
2. 现在剩下 about us 这个li，把它设为 绿色 , height: 120px。
3. "ul.menu li.list 的 margin 改为 -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

我现在把源代码按照上面的方法减小数据、把背景设透明，就显而易见了。