html5 - 一个菜单栏的显示效果
怪我咯
怪我咯 2017-04-17 13:02:40
0
2
470
怪我咯
怪我咯

走同样的路,发现不同的人生

모든 응답 (2)
PHPzhong

根据parent元素ul定位的

//网页源代码,ul的类名为menu .menu { position: relative; width: 170px; padding: 5px 0; line-height: 35px; border-radius: 5px; background: -webkit-linear-gradient(top,#dbdbdb,#999); }
    Peter_Zhu

    这段css固定位置:

    .menu li:nth-child(1):hover ~ .ribbon_wrap{ top: 8px; } .menu li:nth-child(2):hover ~ .ribbon_wrap{ top: 43px; } .menu li:nth-child(3):hover ~ .ribbon_wrap{ top: 78px; } .menu li:nth-child(4):hover ~ .ribbon_wrap{ top: 113px; } .menu li:nth-child(5):hover ~ .ribbon_wrap{ top: 148px; }

    这段CSS移动过去:

    .ribbon_wrap { position: absolute; top: 8px; left: -20px; z-index: 1; transition: top 0.4s; }

    这里的transition让css的top属性在修改时以0.4秒的时间平滑的过渡过去。

      최신 다운로드
      더>
      웹 효과
      웹사이트 소스 코드
      웹사이트 자료
      프론트엔드 템플릿
      회사 소개 부인 성명 Sitemap
      PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!