HTMLについて

Question

下記の商品ページのように画像付きのカテゴリーにマウスを合わせると小カテゴリーに分類されていますが、このようにやりたいです。
https://item.rakuten.co.jp/ai-dougu/n271006/

ご教授のほどよろしくお願い致します。###HR######IMG0326dd368ced467bf93486d8af4dd4114.pngIMG0###

Answer

ECマスターズの伊藤です。

> 下記の商品ページのように画像付きのカテゴリーにマウスを合わせると小カテゴリーに分類されています> が、このようにやりたいです。

基本は、下記HTMLにてご対応いただくことができます。
/* コメントアウト */
で記載している内容部分をカスタマイズしてご利用ください。

ご不明な点がございましたらご質問くださいませ。


もし、コードをご覧いただいて、
全く内容がわからない、というようであれば、

EC WORKS
https://ec-works.co.jp/

へ、メニュー作成のご依頼をご検討くださいませ。


  
    メニュー1
    
    メニュー2
      
        2-1
        2-2
        2-3
        2-4
      
    
    メニュー3
      
          3-1
          3-2
          3-3
          3-4
      
    
    


    .nav {
      width: 750px; /* ニュー全体の横幅 */
      height: 40px; /* メニュー全体の高さ */
      margin: 0 auto;
      padding: 0;
      display: flex;
    }
    .nav li {
      position: relative;
      list-style: none;
    }
    .nav li a {
      display: block;
      width: 150px; /* ドロップダウンメニューの横幅 */
      height: 40px; /* ドロップダウンメニューの高さ */
      text-align: center;
      color: #fff; /* 文字色 */
      font-size: 14px;
      line-height: 2.8;
      background: #9fb7d4; /* 背景色 */
      text-decoration: none;
      border-right: 1px solid #eee; /* 線色 */
      box-sizing: border-box;
    }
    .nav > li:hover > a {
      color: orange; /* オンマウス時文字色 */
      background: #afc6e2; /* オンマウス時背景色 */
    }
    .nav > li li:hover > a {
      color: olive; /* ドロップダウンメニューオンマウス時文字色 */
      background: #afc6e2; /* ドロップダウンメニューオンマウス時背景色 */
    }
    .nav li ul {
      top: 40px;
      left: -40px;
      position: absolute;
    }
    .nav li ul li {
      overflow: hidden;
      height: 0;
    }
    .nav li ul li a {
      border-top: 1px solid #eee;
    }
    .nav li:hover > ul > li {
      overflow: visible;
      height: 40px;
    }
      .nav li ul li ul {
        top: 0;
        left: 110px;
      }
      .nav li ul li ul:before {
        content: "";
        top: 15px;
        left: 30px;
        border: 5px solid transparent;
        border-left: 5px solid #fff;
      }

Answer

早速のご回答ありがとうございます。
できる範囲内で自分でチャレンジしたいと思いますが、
因みにEC WORKSさんに依頼するといくら位の金額になりますか？

Answer

ECマスターズの伊藤です。

> 因みにEC WORKSさんに依頼するといくら位の金額になりますか？

申し訳ございませんが、
作業内容により料金が大幅に異なるため、
事務局では、金額を把握しておりません。

お問い合わせ、お見積りに料金は発生しませんので、
お気軽にお問い合わせいただければと思います。