css基础

/*/!*绝对定位(脱离常规文档流)*!/*/
/*position: absolute;*/
/*/!*固定定位(脱离常规文档流)*!/*/
/*/!*position: fixed;*!/*/
/*/!*相对定位(元素原始位置进行偏移量的增减,并继续占用元素原有位置的空间)*!/*/
/*/!*position: relative;*!/*/
/*/!*默认值(静态)*!/*/

 /*/!*position: static;*!/*/

二级导航：

<ul>

　　<li></li>　

　　<li></li>

　　<li>　　

　　　　<ul>

　　　　　　<li></li>　

　　　　　　<li></li>

　　　　　　<li></li>

　　　　</ul>

　　</li>

</ul>

*/!*设置导航里的内容进行180度旋转,透明,背景色*!/*/
ul>li li{
　　opacity: 0;
　　transition: all 2s;
　　transform: rotatey(180deg);
　　background-color: pink;
}

/*/!*设置导航里的内容角度恢复,透明度,延时*!/*/
ul>li:last-child:hover li:nth-of-type(1){
　　opacity: 1;
　　transition-delay: 0s;
　　transform: none;
}

ul>li:last-child:hover li:nth-of-type(2){
　　opacity: 1；
　　transition-delay: 300ms;
　　transform: none;
}

ul>li:last-child:hover li:nth-of-type(3){
　　opacity: 1;
　　transition-delay: 600ms;
　　transform: none;
}

 

添加下边框（中江到两边）

<ul class="box4">
　　<li>nihao1</li>
　　<li>nihao2</li>
　　<li>nihao3</li>
</ul>

.box4 li{
　　list-style: none;
　　float: left;
　　text-align: center;
　　margin-right: 10px;
　　position: relative;
}

.box4 li:before{
　　content: "";
　　position: absolute;
　　bottom: 0;
　　border: 2px solid;
　　width: 0;
　　left: 50%;
　　transition: all linear 0.5s;
}

.box4 li:hover:before{
　　width: 100%;
　　left:0;

}