:before元素的内容之前插入新内容
z-index: -2
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
position: absolute
生成绝对定位的元素
background: transparent
背景为透明
width: 90%
宽度为90%
height: 80%
高度为80%
content: ''
来插入生成内容
left: 20px
左边距离
bottom:8px
下面距离
-webkit-transform: skew(-12deg) rotate(-4deg)
斜切-12度，旋转-4度。下方同理，前缀是兼容不同浏览器
-moz-transform:skew(-12deg) rotate(-4deg)
-o-transform: skew(-12deg) rotate(-4deg)
-ms-transform: skew(-12deg) rotate(-4deg)
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6)
投影，左边投影为0，下方为8,虚化半径为20，投影颜色黑色，透明度为6%。下方同理，前缀是兼容不同浏览器
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6)
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6)
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6)
behavior: url(ie-css3.htc)
兼容IE浏览器
第二段代码基本一样，只不过:after元素的内容之后插入新内容
text-overflow:ellipsiswhite-space:nowrap
overflow:hidden
在li里添加上这三句就行了，少加一条都不行。
这样可以溢出省略号，要是直接让它超出部分隐藏，就overflow:hidden就可以的。
但是，上面给你的在FF上是没有效果的。只能隐藏超出部分，在其他浏览器上是会溢出省略号的。
1，一般下拉菜单的二级菜单都是绝对定位的，绝对定位的元素脱离了常规流，所以不占位，他们会叠加在其他元素的上面或者下面2，你可以把这里面的空格当作［内］，也就是子孙元素的意思
#menu ul li ---- #menu 内的 ul 内的 li
#menu ul li:first-child a:hover:after ---- #menu 内的 ul 内的 li(并且是ul的第一个子元素) 内的 a 鼠标指向时 after
after/before 的意义在于，他们不存在在html文档中，但是又能被浏览器显示出来，因此，可以用来实现一些效果。
常用的例如：
～文字前面的icon，不用在html中插入多余的空元素，直接使用after或者before，前面后面随便插.......
～清除浮动
～为引用的文字加入引号
～画一些有意思的图标
