1. <body id="boy">
  2. <div id="wrapper">
  3. <header>
  4. <div class="inner">
  5. <nav>
  6. <ul>
  7. <li class="boy"><a href="#"><img src="img/nav1.png" alt="男の子" width="137" height="232"></a></li>
  8. <li class="girl"><a href="#"><img src="img/nav2.png" alt="女の子" width="137" height="232"></a></li>
  9. <li class="pickup"><a href="#"><img src="img/nav3.png" alt="限定商品" width="137" height="232"></a></li>
  10. <li class="shop"><a href="#"><img src="img/nav4.png" alt="店舗検索" width="137" height="232"></a></li>
  11. <li class="login"><a href="#"><img src="img/nav5.png" alt="ログイン" width="132" height="232"></a></li>
  12. </ul>
  13. </nav>
  14. </div>
  15. </header>
  16. </div>
  17. </body>
  1. @charset "UTF-8";
  2. header .inner {
  3. padding-top: 24px;
  4. }
  5. header nav {
  6. padding-bottom: 24px;
  7. }
  8. nav ul {
  9. margin: 0;
  10. padding: 0;
  11. list-style: none;
  12. }
  13. nav ul li {
  14. float: left;
  15. }
  16. nav ul li,
  17. nav ul li a {
  18. width: 137px;
  19. }
  20. nav ul li.login,
  21. nav ul li.login a {
  22. width: 132px;
  23. }
  24. nav ul li a {
  25. display: block;
  26. height: 47px;
  27. overflow: hidden;
  28. }
  29. nav ul li a img {
  30. border: 0;
  31. }
  32. nav ul li a:hover,
  33. #boy nav ul li.boy a,
  34. #girl nav ul li.girl a,
  35. #about nav ul li.about a,
  36. #shop nav ul li.shop a,
  37. #login nav ul li.login a {
  38. height: 52px;
  39. }
  40. nav ul li a:hover img {
  41. margin-top: -60px;
  42. }
  43. nav ul li a:active img {
  44. margin-top: -120px;
  45. }
  46. #boy nav ul li.boy a img,
  47. #girl nav ul li.girl a img,
  48. #about nav ul li.about a img,
  49. #shop nav ul li.shop a img,
  50. #login nav ul li.login a img {
  51. margin-top: -180px;
  52. }
  53. nav ul {
  54. zoom: 1;
  55. }
  56. nav ul:after {
  57. content: "";
  58. display: block;
  59. clear: both;
  60. }