Question

我在 Shopify 上有一家商店，导航栏下拉菜单隐藏在页面内容后面。我试过更改 z-index，但认为可能有一些默认的 Shopfiy CSS 覆盖了它。由于使用 header.liquid 部分动态引入标头，因此所有页面都会发生这种情况。

如何让下拉菜单出现在页面内容的顶部？任何帮助将不胜感激，谢谢。

/*=============== Critical CSS ===================*/
.main-content {
  opacity: 1; 
  z-index: 50;}

.main-content .shopify-section {
  display: inherit; }

.critical-hidden {
  display: inherit; }

/*================ #Basic Styles ================*/
.page-width {
  *zoom: 1;
  max-width: 1200px;
  margin: 0 auto; }
  .page-width::after {
    content: '';
    display: table;
    clear: both; }

.main-content {
  display: block;
  padding-top: 35px; }
  @media only screen and (min-width: 750px) {
    .main-content {
      padding-top: 55px; } }

.section-header {
  margin-bottom: 35px; 
  z-index: 9999 !important}
  @media only screen and (min-width: 750px) {
    .section-header {
      margin-bottom: 55px; } }

/*================ #Site Nav and Dropdowns ================*/
.site-nav--centered {
  padding-bottom: 22px; 
  z-index: 1000;
}

/*================ Site Nav Links ================*/
.site-nav__link.site-nav--active-dropdown {
  border: 1px solid var(--color-border);
  border-bottom: 1px solid transparent;
}

.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
  border-bottom-color: var(--color-text); }

@media only screen and (max-width: 989px) {
  .site-nav__link--button {
    font-size: calc(var(--font-size-base) * 1px); } }

.site-nav__link--button:focus, .site-nav__link--button:hover {
  color: var(--color-text-focus); }

/*================ Dropdowns ================*/
.site-nav--has-dropdown {
  position: relative;
}

.site-nav--has-centered-dropdown {
  position: static; }

.site-nav__dropdown {
  display: none;
  padding: 11px 30px 11px 0;
  margin: 0;
  text-align: left;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  left: -1px;
  top: 41px; }
  .site-nav__dropdown .site-nav__link {
    padding: 4px 15px 5px; }
  .site-nav--active-dropdown .site-nav__dropdown {
    display: block; }
  .site-nav__dropdown li {
    display: block;
  position: relative;
  z-index: 100;
  }

.site-nav__dropdown--right:not(.site-nav__dropdown--centered) {
  right: 0;
  left: unset; }

.site-nav__dropdown--left:not(.site-nav__dropdown--centered) {
  left: 0; }

.site-nav__dropdown--centered {
  width: 100%;
  padding: 0;
  text-align: center; }

<body class="template-index">

  <a class="in-page-link visually-hidden skip-link" href="#MainContent">Skip to content</a><style data-shopify>

  .cart-popup {
    box-shadow: 1px 1px 10px 2px rgba(235, 235, 235, 0.5);
  }</style><div class="cart-popup-wrapper cart-popup-wrapper--hidden critical-hidden" role="dialog" aria-modal="true" aria-labelledby="CartPopupHeading" data-cart-popup-wrapper>
  <div class="cart-popup" data-cart-popup tabindex="-1">
    <div class="cart-popup__header">
      <h2 id="CartPopupHeading" class="cart-popup__heading">Just added to your cart</h2>
      <button class="cart-popup__close" aria-label="Close" data-cart-popup-close><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 40 40"><path d="M23.868 20.015L39.117 4.78c1.11-1.108 1.11-2.77 0-3.877-1.109-1.108-2.773-1.108-3.882 0L19.986 16.137 4.737.904C3.628-.204 1.965-.204.856.904c-1.11 1.108-1.11 2.77 0 3.877l15.249 15.234L.855 35.248c-1.108 1.108-1.108 2.77 0 3.877.555.554 1.248.831 1.942.831s1.386-.277 1.94-.83l15.25-15.234 15.248 15.233c.555.554 1.248.831 1.941.831s1.387-.277 1.941-.83c1.11-1.109 1.11-2.77 0-3.878L23.868 20.015z" class="layer"/></svg></button>
    </div>
    <div class="cart-popup-item">
      <div class="cart-popup-item__image-wrapper hide" data-cart-popup-image-wrapper data-image-loading-animation></div>
      <div class="cart-popup-item__description">
        <div>
          <h3 class="cart-popup-item__title" data-cart-popup-title></h3>
          <ul class="product-details" aria-label="Product details" data-cart-popup-product-details></ul>
        </div>
        <div class="cart-popup-item__quantity">
          <span class="visually-hidden" data-cart-popup-quantity-label></span>
          <span aria-hidden="true">Qty:</span>
          <span aria-hidden="true" data-cart-popup-quantity></span>
        </div>
      </div>
    </div>

    <a href="/cart" class="cart-popup__cta-link btn btn--secondary-accent">
      View cart (<span data-cart-popup-cart-quantity></span>)
    </a>

    <div class="cart-popup__dismiss">
      <button class="cart-popup__dismiss-button text-link text-link--accent" data-cart-popup-dismiss>
        Continue shopping
      </button>
    </div>
  </div>
</div>

<div id="shopify-section-header" class="shopify-section">

<div id="SearchDrawer" class="search-bar drawer drawer--top critical-hidden" role="dialog" aria-modal="true" aria-label="Search" data-predictive-search-drawer>
  <div class="search-bar__interior">
    <div class="search-form__container" data-search-form-container>
      <form class="search-form search-bar__form" action="/search" method="get" role="search">
        <div class="search-form__input-wrapper">
          <input
            type="text"
            name="q"
            placeholder="Search"
            role="combobox"
            aria-autocomplete="list"
            aria-owns="predictive-search-results"
            aria-expanded="false"
            aria-label="Search"
            aria-haspopup="listbox"
            class="search-form__input search-bar__input"
            data-predictive-search-drawer-input
          />
          <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />
          <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
        </div>

        <button class="search-bar__submit search-form__submit"
          type="submit"
          data-search-form-submit>
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"/></svg>
          <span class="icon__fallback-text">Submit</span>
        </button>
      </form>

      <div class="search-bar__actions">
        <button type="button" class="btn--link search-bar__close js-drawer-close">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 40 40"><path d="M23.868 20.015L39.117 4.78c1.11-1.108 1.11-2.77 0-3.877-1.109-1.108-2.773-1.108-3.882 0L19.986 16.137 4.737.904C3.628-.204 1.965-.204.856.904c-1.11 1.108-1.11 2.77 0 3.877l15.249 15.234L.855 35.248c-1.108 1.108-1.108 2.77 0 3.877.555.554 1.248.831 1.942.831s1.386-.277 1.94-.83l15.25-15.234 15.248 15.233c.555.554 1.248.831 1.941.831s1.387-.277 1.941-.83c1.11-1.109 1.11-2.77 0-3.878L23.868 20.015z" class="layer"/></svg>
          <span class="icon__fallback-text">Close search</span>
        </button>
      </div>
    </div>
  </div>
</div>


<div class="animatedParent animateOnce">
<div class="nav animated fadeIn">

<div data-section-id="header" data-section-type="header-section" data-header-section style="margin-bottom: 1.6rem">
  

  <header class="site-header border-bottom logo--left" role="banner">
    <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      

      <div class="grid__item medium-up--one-quarter-nav logo-align--left">
        
        
          <h1 class="h2 site-header__logo">
        
          
<a href="/" class="site-header__logo-image" data-image-loading-animation>
              
              <img class="lazyload js"
                   src="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_300x300.png?v=1606487810"
                   data-src="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_{width}x.png?v=1606487810"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="3.214939024390244"
                   data-sizes="auto"
                   alt="Tom"
                   style="max-width: 120px">
              <noscript>
                
                <img src="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_120x.png?v=1606487810"
                     srcset="//cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_120x.png?v=1606487810 1x, //cdn.shopify.com/s/files/1/0514/3560/2081/files/Tom_logo_final_120x@2x.png?v=1606487810 2x"
                     alt="Tom"
                     style="max-width: 120px;">
              </noscript>
            </a>
          </h1>
      </div>
        <nav class="grid__item medium-up--one-half-nav small--hide" id="AccessibleNav" role="navigation">
          
<ul class="site-nav list--inline" id="SiteNav">
      <li>
        <a href="/collections/shoes"
          class="site-nav__link site-nav__link--main"
          
        >
          <span class="site-nav__label">shoes</span>
        </a>
      </li>
      <li>
        <a href="/collections/sandals"
          class="site-nav__link site-nav__link--main"
          
        >
          <span class="site-nav__label">sandals</span>
        </a>
      </li>
      <li class="site-nav--has-dropdown" data-has-dropdowns>
        <button class="site-nav__link site-nav__link--main site-nav__link--button" type="button" aria-expanded="false" aria-controls="SiteNavLabel-distance">
          <span class="site-nav__label">Distance</span><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"/></svg>
        </button>

        <div class="site-nav__dropdown critical-hidden" id="SiteNavLabel-distance">
            <ul>
                <li>
                  <a href="/collections/all-lightweight-shoes"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">All Lightweight Shoes</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/running"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Running</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/Sport"
                  class="site-nav__link site-nav__child-link site-nav__link--last"
                  
                >
                    <span class="site-nav__label">Running</span>
                  </a>
                </li>
            </ul>
        </div>
      </li>
      <li>
        <a href="/collections/formal"
          class="site-nav__link site-nav__link--main"
          
        >
          <span class="site-nav__label">Formal</span>
        </a>
      </li>
      <li class="site-nav--has-dropdown" data-has-dropdowns>
        <button class="site-nav__link site-nav__link--main site-nav__link--button" type="button" aria-expanded="false" aria-controls="SiteNavLabel-value-packs">
          <span class="site-nav__label">Value Packs</span><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"/></svg>
        </button>
        <div class="site-nav__dropdown critical-hidden" id="SiteNavLabel-value-packs">
            <ul>
                <li>
                  <a href="/collections/casual-wear"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Casual Wear</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/slip-ons"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Slips Ons</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/sandals"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Sandlas</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/Boots"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Boots</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/Recycled"
                  class="site-nav__link site-nav__child-link site-nav__link--last"
                  
                >
                    <span class="site-nav__label">Recycled</span>
                  </a>
                </li>
            </ul>
        </div>
      </li>
      <li>
        <a href="/collections/kids"
          class="site-nav__link site-nav__link--main"
          
        >
          <span class="site-nav__label">Kids</span>
        </a>
      </li>
      <li class="site-nav--has-dropdown" data-has-dropdowns>
        <button class="site-nav__link site-nav__link--main site-nav__link--button" type="button" aria-expanded="false" aria-controls="SiteNavLabel-featured">
          <span class="site-nav__label">Featured</span><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-chevron-down" viewBox="0 0 9 9"><path d="M8.542 2.558a.625.625 0 0 1 0 .884l-3.6 3.6a.626.626 0 0 1-.884 0l-3.6-3.6a.625.625 0 1 1 .884-.884L4.5 5.716l3.158-3.158a.625.625 0 0 1 .884 0z" fill="#fff"/></svg>
        </button>
        <div class="site-nav__dropdown critical-hidden" id="SiteNavLabel-featured">
            <ul>
                <li>
                  <a href="/collections/lightweight"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Lightweight</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/flip-flops"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Flip Flops</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/socks"
                  class="site-nav__link site-nav__child-link"
                  
                >
                    <span class="site-nav__label">Socks</span>
                  </a>
                </li>
                <li>
                  <a href="/collections/trainers"
                  class="site-nav__link site-nav__child-link site-nav__link--last"
                >
                    <span class="site-nav__label">Trainers</span>
                  </a>
                </li>
            </ul>
        </div>
      </li>
      <li>
        <a href="/collections/recycled"
          class="site-nav__link site-nav__link--main"
          
        >
          <span class="site-nav__label">Recycled</span>
        </a>
      </li>
      <li>
        <a href="/collections/sale"
          class="site-nav__link site-nav__link--main"
          
        >
          <span class="site-nav__label">Sale</span>
        </a>
      </li> 
</ul>
</nav>
      
      <div class="grid__item medium-up--one-quarter-nav text-right site-header__icons site-header__icons--plus">
        <div class="site-header__icons-wrapper">

          <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"/></svg>
            <span class="icon__fallback-text">Search</span>
          </button>
              <a href="/account/login" class="site-header__icon site-header__account">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"/></svg>
                <span class="icon__fallback-text">Log in</span>
              </a>
          <a href="/cart" class="site-header__icon site-header__cart">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-cart" viewBox="0 0 37 40"><path d="M36.5 34.8L33.3 8h-5.9C26.7 3.9 23 .8 18.5.8S10.3 3.9 9.6 8H3.7L.5 34.8c-.2 1.5.4 2.4.9 3 .5.5 1.4 1.2 3.1 1.2h28c1.3 0 2.4-.4 3.1-1.3.7-.7 1-1.8.9-2.9zm-18-30c2.2 0 4.1 1.4 4.7 3.2h-9.5c.7-1.9 2.6-3.2 4.8-3.2zM4.5 35l2.8-23h2.2v3c0 1.1.9 2 2 2s2-.9 2-2v-3h10v3c0 1.1.9 2 2 2s2-.9 2-2v-3h2.2l2.8 23h-28z"/></svg>
            <span class="icon__fallback-text">Cart</span>
            <div id="CartCount" class="site-header__cart-count critical-hidden" data-cart-count-bubble>
              <span data-cart-count>5</span>
              <span class="icon__fallback-text medium-up--hide">items</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </header>

隐藏在页面内容后面的导航栏下拉菜单

0 个答案: