完整点击区域的滑动门菜单(ZZ)

近日，Stu Nicholls根据A List Apart的Sliding Doors of CSS, Part II 一文，改写了滑动门菜单，发表了100% clickable Sliding doors ，弥补了9个像素的点击盲区。

点击盲区图示，很明显可见到在上面一张图菜单的边缘无手形。

原有代码：

1. #nav li {
2. float:left;
3. background:url("left_both.gif") no-repeat left top;
4. margin:0;
5. padding:0 0 0 9px;
6. border-bottom:1px solid #765;
7. }
8. #nav a {
9. float:left;
10. display:block;
11. background:url("right_both.gif") no-repeat right top;
12. padding:5px 15px 4px 6px;
13. text-decoration:none;
14. font-weight:bold;
15. color:#765;
16. }

改进过的代码：

1. #nav li {
2. float:left;
3. background:url("right_both.gif") no-repeat right top;
4. margin:0 0 0 9px;
5. padding:0;
6. }
7. #nav a {
8. float:left;
9. display:block;
10. position:relative;
11. left:-9px;
12. margin-right:-9px;
13. width:.1em;
14. background:url("left_both.gif") no-repeat left top;
15. padding:5px 20px;
16. text-decoration:none;
17. font-weight:bold;
18. color:#765;
19. }

比较上面的代码，可以看到左右背景图互换了下，采用了相对定位，列表项目和它的链接使用了正负边界的方法，作者在IE5.x, IE6, IE7, Firefox and Opera调试成功。

演示页面，原来的当前位置代码被我简化掉了，改用类选择器（Class Selectors）了。