css实现特殊效果

二级导航翻转效果：
/*html*/
<ul>
???<li>111</li>
???<li>222</li>
???<li>333
???????<ol>
???????????<li>444</li>
???????????<li>555</li>
???????????<li>666</li>
???????</ol>
???</li>
</ul>
/*css*/

li{
???list-style: none;
???margin-right: 30px;
}
ul>li{
???float: left;
}
ul>li:hover{
???color:orange;
}
ul,ol{
???padding: 0;
???margin: 0;
}
ol>li{
???opacity: 0;
???transition: all 2s;
???transform: rotatey(180deg);
???color: blue;
???background: gainsboro;
}
ul>li:last-child:hover ol>li:first-child{
???opacity: 1;
???transform: none;
???transition-delay: 0s;
}
ul>li:last-child:hover ol>li:nth-child(2){
???opacity: 1;
???transform: none;
???transition-delay:200ms;
}
ul>li:last-child:hover ol>li:last-child{
???opacity: 1;
???transform: none;
???transition-delay: 400ms;
}

从文字下方中间添加下划线:
/*html*/
<ul class="box">
???<li>ddd</li>
???<li>ff</li>
???<li>ggg</li>
</ul>
/*css*/
.box li{
???list-style: none;
???float: left;
???text-align: center;
???margin-left: 10px;
???position: relative;
???padding-bottom: 20px;
}
从文字下方左边添加下划线:
/*html*/
<ul class="box1">
???<li>ddd</li>
???<li>ff</li>
???<li>ggg</li>
</ul>
/*css*/
.box1 li{
???list-style: none;
???float: left;
???width: 80px;
???text-align: center;
???margin-left: 100px;
???position: relative;
???padding-bottom: 20px;
???/*background: red;*/
}
.box1 li:before{
???content:"";
???position:absolute ;
???/*border: 2px solid red;*/
???width: 0;
???left:-100%;
???bottom: 0;
???transition: all linear 2s;
???/*display: none;*/
}
.box1 li:hover:before{
???border: 2px solid red;
???width:100%;
???left:0;