1. <body id="boy">
  2. <d<body id="boy">
  3. <div id="wrapper">
  4. <header>
  5. <div class="inner">
  6. <nav>
  7. <ul>
  8. <li class="boy"><a href="#"><i></i>男の子</a></li>
  9. <li class="girl"><a href="#"><i></i>女の子</a></li>
  10. <li class="pickup"><a href="#"><i></i>限定商品</a></li>
  11. <li class="shop"><a href="#"><i></i>店舗検索</a></li>
  12. <li class="login"><a href="#"><i></i>ログイン</a></li>
  13. </ul>
  14. </nav>
  15. </div>
  16. </header>
  17. </div>
  18. </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 0 5px 0;
  10. padding: 0;
  11. border: 2px white solid;
  12. border-radius: 3px;
  13. list-style: none;
  14. }
  15. nav ul li {
  16. position: relative;
  17. float: left;
  18. width: 136px;
  19. border-right: 1px #b2d63e solid;
  20. font-size: 15px;
  21. font-family: mplus-2c-medium;
  22. line-height: 1.2;
  23. white-space: nowrap;
  24. }
  25. nav ul li.boy {
  26. width: 135px;
  27. }
  28. nav ul li.login {
  29. width: 129px;
  30. border-right: 0;
  31. }
  32. nav ul li:after {
  33. content: " ";
  34. position: absolute;
  35. top: 100%;
  36. left: 50%;
  37. width: 0;
  38. height: 0;
  39. margin: 2px 0 0 -6px;
  40. border: 6px transparent solid;
  41. }
  42. nav ul li a {
  43. display: block;
  44. overflow: hidden;
  45. padding: 12px 0 10px 27px;
  46. border-right: 2px white solid;
  47. border-left: 2px white solid;
  48. color: #519535;
  49. background: white;
  50. text-decoration: none;
  51. outline: none;
  52. }
  53. nav ul li.pickup a,
  54. nav ul li.shop a { padding-left: 18px; }
  55. nav ul li.login a { padding-left: 21px; }
  56. nav ul li.boy a {
  57. border-left: 0;
  58. }
  59. nav ul li.login a {
  60. border-right: 0;
  61. color: white;
  62. background: #b2d63e;
  63. }
  64. nav ul li i {
  65. display: inline-block;
  66. width: 26px;
  67. height: 26px;
  68. margin: -6px 3px 0 0;
  69. background: url(../img/nav_ico.png) 0 0 no-repeat;
  70. vertical-align: middle;
  71. }
  72. nav ul li.girl i {
  73. margin-right: 4px;
  74. background-position: -30px 0;
  75. }
  76. nav ul li.pickup i {
  77. margin-right: 2px;
  78. background-position: -60px 0;
  79. }
  80. nav ul li.shop i {
  81. margin-right: 1px;
  82. background-position: -90px 0;
  83. }
  84. nav ul li.login i {
  85. margin-right: -1px;
  86. background-position: -120px 0;
  87. }
  88. nav ul li a:hover {
  89. color: white;
  90. background: #b2d63e;
  91. }
  92. nav ul li.login a:hover {
  93. background: #f079bb;
  94. }
  95. nav ul li.boy a:hover i { background-position: 0 -30px; }
  96. nav ul li.girl a:hover i { background-position: -30px -30px; }
  97. nav ul li.pickup a:hover i { background-position: -60px -30px; }
  98. nav ul li.shop a:hover i { background-position: -90px -30px; }
  99. nav ul li.login a:hover i { background-position: -120px -30px; }
  100. nav ul li:hover:after,
  101. #boy nav ul li.boy:after,
  102. #girl nav ul li.girl:after,
  103. #about nav ul li.pickup:after,
  104. #shop nav ul li.shop:after,
  105. #login nav ul li.login:after {
  106. border-top-color: white;
  107. }
  108. nav ul li a:active {
  109. padding-top: 13px;
  110. padding-bottom: 9px;
  111. box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset;
  112. }
  113. #boy nav ul li.boy a,
  114. #girl nav ul li.girl a,
  115. #pickup nav ul li.pickup a,
  116. #shop nav ul li.shop a,
  117. #login nav ul li.login a {
  118. padding-top: 12px;
  119. padding-bottom: 10px;
  120. color: #519535;
  121. background: #d8ea9e;
  122. box-shadow: none;
  123. }
  124. #boy nav ul li.boy a i { background-position: 0 -60px; }
  125. #girl nav ul li.girl a i { background-position: -30px -60px; }
  126. #about nav ul li.pickup a i { background-position: -60px -60px; }
  127. #shop nav ul li.shop a i { background-position: -90px -60px; }
  128. #login nav ul li.login a i { background-position: -120px -60px; }
  129. nav ul {
  130. zoom: 1;
  131. }
  132. nav ul:after {
  133. content: "";
  134. display: block;
  135. clear: both;
  136. }