Sliding door menu for full click area

Menu

Click on the blind area diagram, obviously visible to the top of the menu on the edge of the table without a hand shape.

Original code:

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

Improved code:

2. #nav li {
4. float:left;
6. background:url("right_both.gif") no-repeat right top;
8. margin:0 0 0 9px;
10. padding:0;
12. }
14. #nav a {
16. float:left;
18. display:block;
20. position:relative;
22. left:-9px;
24. margin-right:-9px;
26. width:.1em;
28. background:url("left_both.gif") no-repeat left top;
30. padding:5px 20px;
32. text-decoration:none;
34. font-weight:bold;
36. color:#765;
38. }

Compared to the above code, you can see that the left and right background images are interchangeable, using relative positioning, list items and its links using the positive and negative boundaries of the method, the author in ie5.x, IE6, IE7, Firefox and opera debugging success.

Demo Page , the original current position code has been simplified by me, instead of class selector (classes selectors).