wordpress 如何在子菜单中添加滚动条

oalqel3c  于 2023-03-01  发布在  WordPress
关注(0)|答案(1)|浏览(203)

我试图通过CSS添加滚动到我的子菜单没有水平的,只有垂直。
但是,当我删除水平,我的另一个子菜单内的第一个打破,我没有看到它在所有。
请帮帮我。
下面是我的菜单html代码:

<div class="header-col header-center hidden-for-sm"><span class="separator"></span>
  <ul id="menu-main-menu" class="main-menu mega-menu menu-hover-line show-arrow">
    <li id="nav-menu-item-3106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-143 current_page_item active narrow"><a href="https://rich-nails.com/" class=" current">Home</a></li>
    <li id="nav-menu-item-3138" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/about-us/">O nama</a></li>
    <li id="nav-menu-item-15113" class="subMenu1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-sub narrow sub-ready"><a href="https://rich-nails.com/shop/">SHOP</a>
      <div class="popup" style="display: block;">
        <div class="inner" style="">
          <ul class="sub-menu">
            <li id="nav-menu-item-16752" class="menu-item menu-item-type-custom menu-item-object-custom" data-cols="1"><a href="/shop/?orderby=date">Novosti</a></li>
            <li id="nav-menu-item-16663" class="menu-item menu-item-type-post_type menu-item-object-page" data-cols="1"><a href="https://rich-nails.com/akcija/">Akcije</a></li>
            <li id="nav-menu-item-15809" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/sjajevi-i-baze/">Sjajevi i baze</a></li>
            <li id="nav-menu-item-18250" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/gelovi/">Gelovi</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-27918" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/clear-gelovi/">Clear gelovi</a></li>
                <li id="nav-menu-item-27919" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/cover-gelovi/">Cover gelovi</a></li>
                <li id="nav-menu-item-27917" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/babyboomer-gelovi/">Babyboomer gelovi</a></li>
                <li id="nav-menu-item-27922" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/iconic-gel/">French gelovi</a></li>
                <li id="nav-menu-item-27920" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/exclusive-gelovi/">Exclusive gelovi</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15786" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/babe-lak/">Babe lak</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-15787" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/babe/">Babe</a></li>
                <li id="nav-menu-item-15788" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/glitter-babe/">Glitter Babe</a></li>
                <li id="nav-menu-item-15796" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/4in1-babe/">4in1 Babe</a></li>
                <li id="nav-menu-item-15797" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/collection-babe/">Collection Babe</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-16838" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/">Primeri i tekućine</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-25736" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/acetoni-i-cleaneri/">Acetoni i Cleaneri</a></li>
                <li id="nav-menu-item-19601" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/primeri-i-priprema-nokta/">Primeri i priprema nokta</a></li>
                <li id="nav-menu-item-25735" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/ulja-za-kutikuli/">Ulja za kutikulu</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15805" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/raspe/">Rašpe</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-15807" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/raspe/raspe1/">Rašpe</a></li>
                <li id="nav-menu-item-15806" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/raspe/polir-blokovi/">Polir blokovi</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15808" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/sablone/">Šablone</a></li>
            <li id="nav-menu-item-27530" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/https-rich-nails-com-product-category-tipse-i-ljepilo/">Tipse i ljepilo</a></li>
            <li id="nav-menu-item-17082" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/kistovi/">Kistovi</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-21977" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/kistovi/gel/">Gel</a></li>
                <li id="nav-menu-item-21978" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/kistovi/nail-art/">Nail Art</a></li>
                <li id="nav-menu-item-21981" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/kistovi/ostalo-kistovi/">Ostalo</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15798" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/metalni-pribor/">Metalni pribor</a></li>
            <li id="nav-menu-item-17127" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/elektricna-oprema/">Električna oprema</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-27713" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/elektricna-oprema-elektricna-oprema/">Električna oprema</a></li>
                <li id="nav-menu-item-27716" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/nastavci-comby-manikura/">Nastavci comby manikura</a></li>
                <li id="nav-menu-item-27717" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/nastavci-skidanje-gela/">Nastavci skidanje gela</a></li>
                <li id="nav-menu-item-17232" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/dodatna-oprema-elektricna-oprema/">Dodatna oprema</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15791" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/dodatna-oprema/">Dodatna oprema</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-16959" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/dodatna-oprema/display/">Display</a></li>
                <li id="nav-menu-item-27608" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/dodatna-oprema/cetkice-za-prasinu/">Četkice za prašinu</a></li>
                <li id="nav-menu-item-16958" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/dodatna-oprema/ostalo-dodatna-oprema/">Ostalo</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15789" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/ukrasi/">Ukrasi</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-16522" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/aurora-prah/">Aurora prah</a></li>
                <li id="nav-menu-item-15816" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/ukrasi-u-kolutu/">Ukrasi u kolutu</a></li>
                <li id="nav-menu-item-21754" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/cirkoni/">Cirkoni</a></li>
                <li id="nav-menu-item-27824" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/folije/">Folije</a></li>
                <li id="nav-menu-item-15818" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/glitteri/">Glitteri</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-19653" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/merch/">MERCH</a></li>
            <li id="nav-menu-item-15792" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/fashion/">Fashion</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-15793" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/majice-i-hudice/">Majice i hudice</a></li>
                <li id="nav-menu-item-15799" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/maskice/">Maskice</a></li>
                <li id="nav-menu-item-15801" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/pregaca/">Pregača</a></li>
                <li id="nav-menu-item-15800" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/ostalo/">Ostalo</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15802" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/gift-card/">Gift card</a></li>
            <li id="nav-menu-item-15795" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/trepavice/">Trepavice</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-15813" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/volumenske-i-klasicne/">Volumenske i klasične</a></li>
                <li id="nav-menu-item-15812" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/pincete/">Pincete</a></li>
                <li id="nav-menu-item-15811" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/ljepila/">Ljepila</a></li>
                <li id="nav-menu-item-15810" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/dodatna-oprema-trepavice/">Dodatna oprema</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-18737" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/2mbeauty/">Zadnji artikli – 2mBeauty</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-18971" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/2mbeauty-gelovi-2mbeauty/">2mBeauty Gelovi</a></li>
                <li id="nav-menu-item-20365" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/sjajevi-i-baze-2mbeauty/">Sjajevi i baze</a></li>
                <li id="nav-menu-item-20370" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/tekucine-2mbeauty/">Tekućine 2mBeauty</a></li>
                <li id="nav-menu-item-18972" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/">Color Gel</a>
                  <ul class="sub-menu">
                    <li id="nav-menu-item-20032" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/carving/">Carving</a></li>
                    <li id="nav-menu-item-20033" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/effect-gel/">Effect gel</a></li>
                    <li id="nav-menu-item-20034" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/hc-magic-art-liquid/">HC Magic Art Liquid</a></li>
                    <li id="nav-menu-item-20035" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/plasteline/">Plasteline</a></li>
                    <li id="nav-menu-item-20036" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/spider/">Spider</a></li>
                    <li id="nav-menu-item-20037" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/stamping/">Stamping</a></li>
                    <li id="nav-menu-item-21466" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/termo/">Termo</a></li>
                  </ul>
                </li>
                <li id="nav-menu-item-18739" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/">Mini Me</a>
                  <ul class="sub-menu">
                    <li id="nav-menu-item-20025" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/all-in/">All in</a></li>
                    <li id="nav-menu-item-20026" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/cracking/">Cracking</a></li>
                    <li id="nav-menu-item-20027" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/elastic-base/">Elastic Base</a></li>
                    <li id="nav-menu-item-20028" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/galaxy/">Galaxy</a></li>
                    <li id="nav-menu-item-20029" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/holo/">Holo</a></li>
                    <li id="nav-menu-item-20030" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/intense/">Intense</a></li>
                    <li id="nav-menu-item-20031" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/metal/">Metal</a></li>
                    <li id="nav-menu-item-20270" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/magnet-effect-5d/">MAGNET EFFECT 5D</a></li>
                  </ul>
                </li>
                <li id="nav-menu-item-20345" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/acryl-gel/">Acryl Gel</a></li>
                <li id="nav-menu-item-20373" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/dipgo/">Dip&amp;Go</a></li>
                <li id="nav-menu-item-20392" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/raspe-2mbeauty/">Rašpe 2mBeauty</a></li>
                <li id="nav-menu-item-20393" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/dodatna-oprema-2mbeauty/">Dodatna oprema</a></li>
              </ul>
            </li>
            <li id="nav-menu-item-15794" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/oklagije-za-maderoterapiju/">Oklagije za maderoterapiju</a>
              <ul class="sub-menu">
                <li id="nav-menu-item-15804" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/oklagije-za-maderoterapiju/oklagije-za-tijelo/">Oklagije za tijelo</a></li>
                <li id="nav-menu-item-15803" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/oklagije-za-maderoterapiju/oklagije-za-lice/">Oklagije za lice</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li id="nav-menu-item-16135" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/objave/">Blog</a></li>
    <li id="nav-menu-item-15524" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/cjenik/">Cjenik</a></li>
    <li id="nav-menu-item-19274" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/postani-dio-tima/">Postani dio tima</a></li>
    <li id="nav-menu-item-23036" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/edukacije/">Edukacije</a></li>
    <li id="nav-menu-item-15306" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/contact-us/">Kontakt</a></li>
    <li class=" astm-search-menu is-menu is-dropdown menu-item"><a href="#" aria-label="Search Icon Link"><svg width="20" height="20" class="search-icon" role="img" viewBox="2 9 20 5" focusable="false" aria-label="Search">
                        <path class="search-icon-path" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></a>
      <form
        class="is-search-form is-form-style is-form-style-3 is-form-id-0 " action="https://rich-nails.com/" method="get" role="search"><label for="is-search-input-0"><span class="is-screen-reader-text">Search for:</span><input type="search" id="is-search-input-0" name="s" value="" class="is-search-input" placeholder="Search here..." autocomplete="off"></label><button type="submit"
          class="is-search-submit"><span class="is-screen-reader-text">Search Button</span><span class="is-search-icon"><svg focusable="false" aria-label="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></span></button></form>
        <div
          class="search-close"></div>
</li>
</ul>
</div>

这是一个网站:https://rich-nails.com
它仅限于某些国家,我希望它不是为你的:)
先谢了!

bt1cpqcv

bt1cpqcv1#

要实现子菜单垂直滚动,您只需添加
以下CSS代码

.sub-menu{
            overflow-y: auto;
            max-height: 10em;
        }

有关参考,请参见https://codepen.io/marianoor09/pen/vYzLpGg
此外,您还可以查看下面的链接,直观地看到解决方案:TestWise Replay| sub-menu multiple scrolls

相关问题