你能用CSS为导航添加的效果

<header>
    <nav>
        <ul>
            <li><img src="img/G222291335.png" alt="logo"/></li>
            <li><a href="#">首页</a></li>
            <li><a href="#">动态</a></li>
            <li class="other_choice">
                <a href="#">其他</a>
                <ol class="second_menu">
                    <li><a href="#">其他</a></li>
                    <li><a href="#">其他</a></li>
                    <li><a href="#">其他</a></li>
                </ol>
            </li>
        </ul>
    </nav>
</header>

header{
    height: 44px;
    background: linear-gradient(#838DA7,#576070);
}
header ul>li{
    float: left;
}
header ul li a {
    line-height: 44px;
}
header li{
    padding: 0 25px;
}
header ul>li:first-child{
    margin-left: 220px;
    padding: 0;
    box-shadow: 0 0 5px 5px rgba(255,255,255,.2);
}
header li:hover a,.second_menu li>a{
    color:#fff;
}
.other_choice{
    position: relative;
}
.second_menu{
    width: 100%;
    position: absolute;
    left: 0;
    visibility: hidden;
}
.second_menu li{
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    background-color: #8E816F;
    border-bottom: 1px solid #D6D6D8;
    transform: rotateY(180deg);
    transition: all linear 400ms;
}
.other_choice:hover .second_menu{
    visibility: visible;
}
.other_choice:hover .second_menu>li{
    transform: skew(180deg);
}
.second_menu>li:nth-child(3){
    transition-delay:0ms;
}
.second_menu>li:nth-child(2){
    transition-delay:300ms;
}
.second_menu>li:nth-child(1){
    transition-delay:600ms;
}
/*一级菜单最后一项 移入后 二级菜单选项*/
.other_choice:hover .second_menu li:first-child{
   transition-delay: 0s;
}
.other_choice:hover .second_menu li:nth-child(2){
    transition-delay: 300ms;
}
.other_choice:hover .second_menu li:nth-child(3){
    transition-delay: 600ms;
}

<header>
    <nav>
        <ul>
            <li><a href="#">first</a></li>
            <li><a href="#">second</a></li>
            <li><a href="#">third</a></li>
        </ul>
    </nav>
</header>

header ul{
    overflow: hidden;
    padding-bottom: 3px;
    background: linear-gradient(#838DA7,#576070);
}
header li{
    padding-bottom: 5px;
    float: left;
    margin-left: 100px;
    position: relative;
}
header li a{
    font-size: 30px;
}
header li:hover a{
    color: #fff;
}
header li:before{
    content:"";
    width: 0;
    border-bottom: 5px solid rgba(255,255,255,.2);
    position: absolute;
    left: 50%;
    bottom: 0;
    transition: all linear .5s;
}
header li:hover:before{
    width: 100%;
    left: 0;
}

<ul class="nav3">
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
</ul>

.nav3{
    width: 300px;
    margin: auto;
}
.nav3 li{
    float: left;
    width: 120px;
    height: 40px;
    transform: skew(-20deg);
    background: linear-gradient(#838DA7,#576070);
    margin-left: 20px;
}
.nav3 li a{
    color: #fff;
    display: block;
    line-height: 40px;
    text-align: center;
    transform: skew(20deg);
}
.nav3 li:first-child:before{
    content: "";
    width:0;
    height: 0;
    border-top: 4px solid #576070;
    position: absolute;
    bottom: 0;
    left: -160px;
}
.nav3 li:first-child:hover:before{
    width: 80%;
    left: 0;
    transition: all linear 300ms;
}
.nav3 li:last-child:before{
    content: "";
    width: 0;
    height: 0;
    border-top: 4px solid #838DA7;
    position: absolute;
    top: 0;
    left: 279px;
}
.nav3 li:last-child:hover:before{
    width: 80%;
    left:10%;
    transition: all linear 300ms;
}

<div class="movie_show">
    <ul>
        <li>
            <a href="#"><img src="img/movie_pic15.png" alt="银河护卫队2"/></a>
            <h2>《银河护卫队2》</h2>
            <time>2017.5.5</time>
        </li>
        <li>
            <time>2008.8.20</time>
            <h2>《无敌浩克》</h2>
            <a href="#"><img src="img/movie_pic02.png" alt="浩克"/></a>
        </li>
        <li>
            <a href="#"><img src="img/movie_pic03.png" alt="钢铁侠2"/></a>
            <h2>《钢铁侠2》</h2>
            <time>2010.4.25</time>
        </li>
        <li>
            <time>2011.5.2</time>
            <h2>《奇异博士》</h2>
            <a href="#"><img src="img/movie_pic14.png" alt="奇异博士"/></a>
        </li>
        <li>
            <a href="#"><img src="img/movie_pic05.png" alt="美队"/></a>
            <h2>《美国队长》</h2>
            <time>2011.7.19</time>
        </li>
        <li>
            <time>2018.11.2</time>
            <h2>《惊奇队长》</h2>
            <a href="#"><img src="img/movie_pic19.png" alt="惊奇队长"/></a>
        </li>
    </ul>
</div>

.movie_show{
    width: 100%;
    height: 500px;
    background: url("img/movie_bj.jpg") center;
}
.movie_show ul{
    width: 1020px;
    height: 450px;
    overflow: hidden;
    margin: auto;
    text-align: center;
    display: flex;
}
.movie_show ul li{
    height: 244px;
    cursor: pointer;
    flex-grow: 1;
    font-size: 0;
    color: #ffffff;
    text-align: center;
}
.movie_show li:hover{
    color: #f32c1e;
}
.movie_show ul li:nth-child(even){
    align-self:flex-end;
}
.movie_show li>h2,.movie_show li>time {
    font-size: 18px;
}
.movie_show li time{
    width: 118px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
}
.movie_show li:hover time{
    background:url("img/icon.png") 0 -312px;
}
.movie_show ul li:nth-child(odd) time{
    margin: 32px auto 0;
}
.movie_show ul li:nth-child(even) time{
    margin: 0 auto 26px;
}
.movie_show li:hover time{
    background:url("img/icon.png") 0 -312px;
}
.movie_show li a{
    display: block;
}
.movie_show li:nth-child(1)>a{
    background:url("img/movie_pic15.png") no-repeat center;
}
.movie_show li:nth-child(2)>a{
    background:url("img/movie_pic02.png") no-repeat center;
}
.movie_show li:nth-child(3)>a{
    background:url("img/movie_pic03.png") no-repeat center;
}
.movie_show li:nth-child(4)>a{
    background:url("img/movie_pic14.png") no-repeat center;
}
.movie_show li:nth-child(5)>a{
    background:url("img/movie_pic05.png") no-repeat center;
}
.movie_show li:nth-child(6)>a{
    background:url("img/movie_pic19.png") no-repeat center;
}
.movie_show li:hover img{
    opacity: 0;
    transform: scale(1.5);
    transition: all 1s linear;
}