这种动态按钮是不是很?？
下面就是制作过程。
给你的导航加入<nav id="nav" role="navigation"> <ul class="bar">标签
然后给每个链接加上<li class="current">
然后给你的css中加入
/** 导航 **/
#nav> ul{list-style-type:none;width:100%;float:left;line-height:43px;height:43px;}
#nav> ul> li{float:left;text-align:center;line-height:23px;margin:6px 2px 0 0;height:23px;position:relative;}
#nav> ul> li.current a{color:#ffffff;background-color:#cc0000;padding: 1px 10px;background-size: 13px 15px;background-image:linear-gradient(to top left, transparent, transparent 25%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.15));}
#nav> ul> li a{color:#404040;display:block;background:#ffffff;padding:3px 20px;transition:0.2s;}
#nav> ul> li a:hover{color:#ffffff;background-color:#cc0000;padding:3px 20px;background-size:16px 16px;background-image:linear-gradient(to top left, transparent, transparent 25%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.15));animation:progress .6s linear infinite; -webkit-animation:progress .6s linear infinite;}
#nav> ul> li a:active,#nav> ul> li:active > a{color:#ffffff;background-color:#cc0000;transform:scale(0.95);-webkit-transform:scale(0.95)}
#nav .catbtn a{padding:3px 25px 3px 15px;}
#nav .catbtn a:hover{padding:3px 25px 3px 15px;}
#nav .catbtn:hover .catbtnx{color:#ffffff;background-color:#cc0000;background-size:16px 16px;background-image:linear-gradient(to top left, transparent, transparent 25%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0.15));padding:3px 25px 3px 15px;}
#nav li ul{z-index:10;background:#ffffff;display:none;position:absolute;left:0px;top:29px;width:120px;text-align:left;border:1px solid #dddddd;border-top:2px solid #ff4500;}
#nav li ul li{border-bottom:1px solid #dddddd;}
#nav li ul li:last-child{border:none;}
#nav li ul a{line-height:28px;height:28px;background:#ffffff;color:#777777;}
#nav li ul a:hover{background:#f6f6f6;color:#303030;}
#nav li ul a:hover .catbtn{color:#404040;background-color:#cc0000;padding:5px 25px;}
#nav li a .arrow{position:absolute;top:50%;right:14px;margin-top:1px;border-color:#404040 transparent;border-style:solid;border-width:4px 4px 0 4px;width:0;height:0;display:inline-block;}
#nav li:hover .arrow{position:absolute;top:50%;right:14px;border-color:#ffffff transparent;border-style:solid;border-width:0 4px 4px 4px;width:0;height:0;display:inline-block;}