最近，网上已有越来越多的滑动门菜单样式。可谓五花八门，让人眼花缭乱。今日闲来无事，也写了一个，仅供参考。
这里比较重要是链接区域的宽要能自适应，防止有的链接字多，有的链接字少，造成不可意料的维护麻烦。
［演示地址：http://www.doyoe.com/model/xhtmlcss/menu/menu2/1.htm］
输出效果：
.dymenu_m1 { padding-left:10px; margin-top:20px; height:32px; background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/menubg.gif) left top repeat-x; overflow:hidden; } .dymenu_m1 a { padding-left:4px; margin-top:5px; height:27px; line-height:27px; color:#565656; text-decoration:none!important; float:left; } .dymenu_m1 a span { padding:0 10px 0 6px; background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/up.gif) right center no-repeat; cursor:pointer; float:left; } .dymenu_m1 a:hover,.dymenu_m1 a.index { color:#333!important; background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/down_left.gif) left top no-repeat; } .dymenu_m1 a:hover span,.dymenu_m1 a.index span { background:url(http://www.doyoe.com/model/xhtmlcss/menu/menu2/skin/down_right.gif) right top no-repeat; } .dymenu_m1 a.index span { font-weight:bold; }
Home News Products About Contact
CSS部分：
html,body { margin:0; font-size:12px; }.dymenu { margin-top:20px; height:32px; background:url(menubg.gif) left top repeat-x; overflow:hidden;}.dymenu a { padding-left:4px; margin-top:5px; height:27px; line-height:27px; color:#565656; text-decoration:none; float:left;}.dymenu a span { padding:0 10px 0 6px; background:url(up.gif) right center no-repeat; cursor:pointer; float:left;}.dymenu a:hover,.dymenu a.index { color:#333; background:url(down_left.gif) left top no-repeat; } .dymenu a:hover span,.dymenu a.index span { background:url(down_right.gif) right top no-repeat; }.dymenu a.index span { font-weight:bold; }
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=gb2312" /><title>Doyoe's Menu</title><meta name="author" content="飘零雾雨|edzmaster@gmail.com" /></head><body><div class="dymenu"> <a href="#" class="index"><span>Home</span></a> <a href="#"><span>News</span></a> <a href="#"><span>Products</span></a> <a href="#"><span>About</span></a> <a href="#"><span>Contact</span></a></div></body></html>
原文地址：http://blog.doyoe.com/blogedit.asp?id=7
