［演示地址：http://www.doyoe.com/model/xhtmlcss/menu/menu4/1.htm］
CSS部分：
html,body { margin:0; font:12px "宋体";}.dymenu { padding:50px; overflow:hidden;}.dymenu a { margin-left:-21px; color:#050; line-height:22px; text-decoration:none; background:url(left.gif) left 0 no-repeat; float:left;}.dymenu a span { margin-left:21px; padding:0 31px 0 10px; background:url(right.gif) right 0 no-repeat; cursor:pointer; float:left;}.dymenu a:hover,.dymenu a.index { color:#444; background-position:left -23px;}.dymenu a:hover span,.dymenu a.index span { background-position:right -23px;}
XHTML部分：
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Doyoe's Menu</title><meta name="Author" content="飘零雾雨|edzmaster@gmail.com" /></head><body><div class="dymenu"> <a href="#1" class="index"><span>Doyoe's Menu</span></a> <a href="#2"><span>About Me</span></a> <a href="#3"><span>Contact Me</span></a> <a href="#4"><span>I can adaptive width</span></a></div></body></html>
上面的效果应该没什么问题吧 ：） 呵呵，一直期望能够不会有问题，可问题就喜欢和你瞎纠缠。
回到前面说的盲点区域上来，细心的你会发现除最后面的一个链接外，每个链接的右上角区域都会有一块鼠标无法点击的区域。虽说地方不大，但留着总是碍眼。
有一个方法可以消除这块盲点，在测试的同学，可以给hover状态加一个zIndex：
.dymenu a:hover { position:relative; z-index:99; color:#444; background-position:left -23px;}
意思就是说hover状态的链接级别总是在别的链接之上，这样右上角的盲点区域自然就可以消除了。可这样，别的问题又来了，hover状态的链接会将下一个链接的左下角位置遮盖，这样又出现了除第一个链接之外的左下角盲点区域。
真够折腾的，不知道哪位同学有消除这两个盲点区域的好方法，感谢留言：）
