纵向带图片覆盖显示的菜单效果

核心属性

padding-top: 300px 为图片的显示留下空间

text-shadow 文字阴影效果，使文字看起来更立体

:hover + transition + border-left-width 悬停菜单项时左侧的蓝色竖线变宽动画

border-radius: 50% + overflow: hidden 将图片变为圆形

box-shadow 给图片增加边框

:hover + transition + opacity 悬停菜单项时显示对应的图片效果

绝对定位元素默认按照顺序层叠，再加上opacity的透明效果，所以z-index属性是不需要的。并且在CSS3中，当opacity的值不为1时，会创建一个层叠上下文，所以也可以使用opacity:.9;来提高层叠级别。

1. <nav id="k-nav">

2. <a href="#">主页<img src="https://pics.codecolor.cn/overlapping-image-navigation/watch.jpg" alt="Photograph of a watch"></a>

3. <a href="#">关于<img src="https://pics.codecolor.cn/overlapping-image-navigation/kalina-whyte.jpg" alt="Photograph of Kalina Whyte"></a>

4. <a href="#">文件<img src="https://pics.codecolor.cn/overlapping-image-navigation/rocks.jpg" alt="Photographs of rocks"></a>

5. <a href="#">联系<img src="https://pics.codecolor.cn/overlapping-image-navigation/mail.jpg" alt="Photograph of air mail envelopes"></a>

6. </nav>

1. nav#k-nav {

2. position: relative;

3. width: 300px;

4. margin-left: 4em;

5. padding-top: 300px;

6. padding-bottom: 40px;

7. background: #3F3935;

8. border-radius: 20px;

9. }

10. nav#k-nav a {

11. box-sizing: border-box;

12. display: block;

13. padding: 8px 8px 8px 20px;

14. border-left: 8px solid #356374;

15. border-bottom: 1px dashed #000;

16. font-size: 1.4rem;

17. color: #CFCECE;

18. text-decoration: none;

19. text-shadow: 2px 2px 2px rgba(0,0,0,0.6);

20. transition: .7s all linear;

21. }

22. nav#k-nav a:hover {

23. border-left-width: 20px;

24. }

25. nav#k-nav a img {

26. position: absolute;

27. top: 25px;

28. left: 25px;

29. width: 250px;

30. border-radius: 50%;

31. opacity: 0;

32. overflow: hidden;

33. box-shadow: 0 0 0 3px #000;

34. transition: .7s all linear;

35. }

36. nav#k-nav a:first-child img {

37. opacity: 1;

38. }

39. nav#k-nav a:hover img {

40. opacity: 1;

41. }