近日，Stu Nicholls根据A List Apart的Sliding Doors of CSS, Part II 一文，改写了滑动门菜单，发表了100% clickable Sliding doors ，弥补了9个像素的点击盲区。
点击盲区图示，很明显可见到在上面一张图菜单的边缘无手形。
原有代码：
引用:
#nav li {
float:left;
background:url("right_both.gif") no-repeat right top;
margin:0 0 0 9px;
padding:0;
}
#nav a {
float:left;
display:block;
position:relative;
left:-9px;
margin-right:-9px;
width:.1em;
background:url("left_both.gif") no-repeat left top;
padding:5px 20px;
text-decoration:none;
font-weight:bold;
color:#765;
}
比较上面的代码，可以看到左右背景图互换了下，采用了相对定位，列表项目和它的链接使用了正负边界的方法，作者在IE5.x, IE6, IE7, Firefox and Opera调试成功。
演示点下面运行代码，原来的当前位置代码被我简化掉了，改用类选择器（Class Selectors）了。
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>完整点击区域的滑动门菜单</title>
<style type="text/css">
<!--
#nav {margin:20px 0 80px 0;}
#nav {
float:left;
width:100%;
background:#dae0d2 url("http://www.forest53.com/tutorials/demo/img/bg.gif") repeat-x bottom;
}
#nav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#nav li {
float:left;
background:url("http://www.forest53.com/tutorials/demo/img/right_both.gif") no-repeat right top;
margin:0 0 0 9px;
padding:0;
}
#nav a {
float:left;
display:block;
position:relative;
left:-9px;
margin-right:-9px;
width:.1em;
background:url("http://www.forest53.com/tutorials/demo/img/left_both.gif") no-repeat left top;
padding:5px 20px;
text-decoration:none;
font-weight:bold;
color:#765;
}
#nav > ul a {width:auto;}
/* 仅IE5-Mac 解析这段代码\*/
#nav a {float:none;}
/* End IE5-Mac hack */
#nav a:hover {
color:#333;
}
#nav li.current{
background-position:100% -150px;
}
#nav li.current a{
background-position:0 -150px;
padding-bottom:6px;
color:#333;
}
/* IE5.x or IE6 不支持下面的代码*/
#nav li:hover,
#nav li:hover a {
background-position:100% -150px;
color:#333;
}
#nav li:hover a {
background-position:0 -150px;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li class="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
