Second-level navigation rollover effect:
/*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:ga Insboro;
}
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;
}
add an underscore from below the text:
/*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;
}
Add an underscore from the bottom of the text:
/*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;
CSS for special effects