.nav input:checked + a:after{content:"";height:0;width:0;overflow:hidden;border:50px solid transparent;border-bottom-color:#AA213E;position:absolute;bottom:50px;left:50%;margin-left:-50px;}
.nav input:hover + a{background:#D9161A;}
.nav input:checked:hover + a{background:#AA213E;}
.clr 是清除浮动的
border:50px solid transparent;里transparent就是设置为颜色为透明，后面再只给border-bottom-color设置颜色，就只会显示底部三角了
加了hover 所以鼠标滑过的时候颜色会变
.clr在哪 没看到
.st-container input:checked + a:after{content: "";width: 0;height: 0;overflow: hidden;
border: 20px solid transparent;border-bottom-color: #821134;position: absolute;bottom: 100%;left: 50%;margin-left: -20px;}
.st-container input:checked + a,
.st-container input:checked:hover + a{background: #3f7830;}
三个透明边框 你可以搜索下 CSS画三角形 那边说的比较详细 你重新写一遍看看 因为加了hover就是鼠标掠过的触发所以鼠标移动上去于颜色会变