用CSS3和dl,dt,dd实现导航动画过渡效果

在外部CSS样式表中书写如下：
*{margin:0;padding:0;}去除自带外边距与内边距
a{text-decoration:none;}去除a标签下划线
.margin{width:1000px;margin:0 auto;} 用来保持导航栏的宽度和位置
nav{height:36px;background:#006;} 整个导航栏的高度与颜色
nav dl{overflow:hidden;} 解决溢出隐藏、清除浮动、解决外边距塌陷等等
nav dl dd{font:16px/36px “”;color:#fff;float:left;padding:0 10px;}字体大小、行高、颜色、浮动、填充大小
nav dl dd:first-child{background:#f00;}第一个dd（当前页面）显示的背景颜色与dt相同
nav dl dt{background:#f00;width:52px;height:36px;background:#f00;transition:.5s;}导航动画过渡的时间、寬高、颜色
nav dl dd.xiao:hover~dt{width:68px;}鼠标划过字数不一样的dd时改变dt的寬高（有多少个不同的就写多少个class）
以下书写的是划过导航栏哪个dd时dt移动到那个dd上的动画过渡效果
nav dl dd:nth-child(2):hover~dt{margin-left:52px;}
nav dl dd:nth-child(3):hover~dt{margin-left:104px;}
nav dl dd:nth-child(4):hover~dt{margin-left:172px;}
nav dl dd:nth-child(5):hover~dt{margin-left:224px;}
nav dl dd:nth-child(6):hover~dt{margin-left:292px;}
nav dl dd:nth-child(7):hover~dt{margin-left:344px;}
nav dl dd:nth-child(8):hover~dt{margin-left:396px;}
nav dl dd:nth-child(9):hover~dt{margin-left:448px;}
nav dl dd:nth-child(10):hover~dt{margin-left:516px;}
在body的nav标签中书写如下代码

	
大大
	
小小
    
你大爷
	
左左
    
二大爷
	
右右
	
上上
	
下下
    
三大爷
	
结束
    	
	

现阶段PC端，某些浏览器不支持这种动画过渡效果