1. <body id="boy">
  2. <div id="wrapper">
  3. <header>
  4. <div class="inner">
  5. <nav>
  6. <ul>
  7. <li class="boy"><a href="#">男の子</a></li>
  8. <li class="girl"><a href="#">女の子</a></li>
  9. <li class="pickup"><a href="#">限定商品</a></li>
  10. <li class="shop"><a href="#">店舗検索</a></li>
  11. <li class="login"><a href="#">ログイン</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. text-indent: 100%;
  29. white-space: nowrap;
  30. background: url(../img/nav.png) 0 0;
  31. }
  32. nav ul li.girl a { background-position: -137px 0; }
  33. nav ul li.pickup a { background-position: -274px 0; }
  34. nav ul li.shop a { background-position: -411px 0; }
  35. nav ul li.login a { background-position: -548px 0; }
  36. nav ul li a:hover { height: 52px; }
  37. nav ul li.boy a:hover { background-position: 0 -60px; }
  38. nav ul li.girl a:hover { background-position: -137px -60px; }
  39. nav ul li.pickup a:hover { background-position: -274px -60px; }
  40. nav ul li.shop a:hover { background-position: -411px -60px; }
  41. nav ul li.login a:hover { background-position: -548px -60px; }
  42. nav ul li.boy a:active { background-position: 0 -120px; }
  43. nav ul li.girl a:active { background-position: -137px -120px; }
  44. nav ul li.pickup a:active { background-position: -274px -120px; }
  45. nav ul li.shop a:active { background-position: -411px -120px; }
  46. nav ul li.login a:active { background-position: -548px -120px; }
  47. #boy nav ul li.boy a { height: 52px; background-position: 0 -180px; }
  48. #girl nav ul li.girl a { height: 52px; background-position: -137px -180px; }
  49. #pickup nav ul li.pickup a { height: 52px; background-position: -274px -180px; }
  50. #shop nav ul li.shop a { height: 52px; background-position: -411px -180px; }
  51. #login nav ul li.login a { height: 52px; background-position: -548px -180px; }
  52. nav ul {
  53. zoom: 1;
  54. }
  55. nav ul:after {
  56. content: "";
  57. display: block;
  58. clear: both;
  59. }