下拉菜单WordPress _大数据知识库

目前，该图标是永久显示。我试图创建它，所以当悬停在图标出现。这是我到目前为止，但我错过了一些东西.
PHP

<a href="javascript:void(0);" class="site-mobile-menu-icon" onclick="openMenu()"><i class="fas fa-bars"></i></a>

个字符
CSS

/* Header */ 
.site-header {
    width: 100%;
    max-width: 100%;
    padding: 0;
    display: block;
    position: fixed;
    z-index: 999;
    transition: all ease-out 0.3s;
}
.active {
    background-color: white;
}
.site-header .container {
    /*max-width: var(--section-width-boxed);
    padding: calc(100vw * 15/1440) 0;*/
    display: flex;
    align-items: center;
}
.site-logo .custom-logo {
    height: 50px;
}
.primary-navigation .primary-menu-container {
    margin-left: 0;
    margin-right: 0;
}
.primary-navigation a,
.primary-navigation .sub-menu .menu-item > a {
    font-family: var(--font-family-default);
    font-weight: 600;
    font-size:  calc(100vw * 13/1440);
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: calc(100vw * 5/1440) calc(100vw * 10/1440);
    transition: color 0.1s ease-in-out;
}
.primary-navigation a:hover,
.primary-navigation a:focus {
    text-decoration: none;
    color: #F99DC5;
    transition: color 0.3s ease-in-out;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
    min-width: calc(100vw * 180/1440);
    position: absolute;
    padding-top: 0;
    border: none;
    box-shadow: 0px 3px 5px -2px rgb(0 0 0 / 50%);
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
    background: white;

}
.primary-navigation > div > .menu-wrapper .sub-menu-toggle,
.primary-navigation > div > .menu-wrapper > li > .sub-menu:before, 
.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
    display: none;
}

型
移动的CSS

/* Mobile Menu */
.site-mobile-menu a {
    display: inline-block;
    color: black;
    padding-left: var(--primary-nav--padding);
    padding-right: var(--primary-nav--padding);
    transition: color 0.3s ease-in-out;
}
.site-mobile-menu a:hover,
.site-mobile-menu a:focus {
    text-decoration: none;
    color: #F99DC5;
    transition: color 0.3s ease-in-out;
}
#mobile-menu {
    margin-bottom: 55px;
}
#site-mobile-menu ul {
    list-style: none;
    font-size: 18px;
}
#site-mobile-menu ul li a {
    text-decoration: none;
    text-transform: lowercase;
    font-size: 14px;
    margin-bottom: 10px;
    background-color: #FFE0F2;
    padding: 15px 5px 15px 55px;
    width: 100%;
    display: block;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
#site-mobile-menu ul li.sale a {
    background-image: url('https://www.lacefronts.com.au/staging/wp-content/uploads/2022/11/sale-icon.jpg');
    font-weight: 700;
    color: #cc1e1e;
}

#site-mobile-menu ul li.humanhair a {
    ;
}

#site-mobile-menu ul li.pony a {
   ;
}

#site-mobile-menu ul li.synthetic a {
    ;
}

#site-mobile-menu ul li.glue a {
    ;
}
#site-mobile-menu ul li.care a {
   ;
}
#site-mobile-menu ul li.bundles a {
   ;
}
#site-mobile-menu ul li.tutorials a {
    ;
}
#site-mobile-menu ul li.toppers a {
 ;
}
#site-mobile-menu ul li.faq a {
    ;
}
#site-mobile-menu ul li.contact a {
 ;
}
#site-mobile-menu ul li.blogs a {
   ;
}
#site-mobile-menu ul li.build a {
    ;
}
#site-mobile-menu ul li.shipping a {
    ;
}
#site-mobile-menu ul li.matureicon > a {
   ;
}
#site-mobile-menu ul li.privacy a {
    ;

}
#site-mobile-menu ul li.accessories > a {
 ;
    /*background-position: -23px;*/
}
#site-mobile-menu ul li.consult > a {
   ;
}
#site-mobile-menu ul li.wishlist > a {
   ;
}
#site-mobile-menu ul li.ponytails > a {
    ;
}
#site-mobile-menu ul li.bookappoint a {
    ;
}
#site-mobile-menu ul li.financialassist a {
    ;
}
#site-mobile-menu ul li.under100 a {
    ;
}
.main-nav ul li:hover > ul {
    display: block;
}

#site-mobile-menu ul li .Help a {
    padding-left: 0;
    margin-top: 10px;
 
}
#site-mobile-menu .aws-container {
    margin: 15px 0;
}
#site-mobile-menu .aws-container .aws-search-field {
    font-family: var(--font-family-default);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    padding: 10px 20px;
    color: black;
    border-image-source: var(--color-gradient-green-pink);
    border-image-slice: 1;
}
#site-mobile-menu .sub-menu ul li a {
    padding-left: 0;
    margin-top: 10px;
}

#site-mobile-menu #menu-mobile-list {
    padding-left: 0;
}
#ppc-button-minicart {
    display: none;
}
@media (min-width: 601px) {
    .primary-menu-container {
        display: none;
    }
    #site-mobile-menu ul li a {
        font-size: 15px;
    }
    .site-mobile-menu-container {
        min-width: calc(100vw * 450/1900)
    }
    button.sub-menu-toggle {
        display: none;
    }
}
@media only screen and (max-width: 600px) {
    #site-navigation {
        display: none;
    }
    .site-header {
        max-height: 75px;
    }
    .site-header .container {
        display: block;
    }
    .site-branding {
        margin-right: 0;
        width: 100%;
        text-align: center;
    }
    .site-branding .site-logo {
        position: relative !important;
        top: 0 !important;
    }
    .site-login,
    .site-mobile-menu  {
        float: left;
        transform: translate(-20px, -50px);
    }
    .site-search,
    .site-mini-cart {
        float: right;
        transform: translate(20px, -50px);
    }
    #site-search-form .aws-container {
        width: 100%;
        margin-top: 15px;
    }
    .site-search-form-close {
        top: 33px;
        right: -18px;
        font-size: 18px;
    }
    .site-mini-cart-container,  
    .site-mobile-menu-container {
        max-width: 85%;
    }
    #site-search-form .aws-container .aws-search-field {
        font-size: 14px;
    }
            #access ul li:hover > ul {;
                display: none;
    }
.sub-menu-toggle {
        display: none;

}

型
HTML

<nav id="mobile-menu" class="mobile-menu">

                <div class="menu-mobile-container"><ul id="menu-mobile-list" class="menu-wrapper"><li class="wishlist menu-item menu-item-type-post_type menu-item-object-page menu-item-12661"><a href="https://www.lacefronts.com.au/my-wish-list/">My Wish List</a></li>
<li class="bookapp menu-item menu-item-type-custom menu-item-object-custom menu-item-13749"><a href="https://lfa-106993.square.site">Book Appointment</a></li>
<li class="build menu-item menu-item-type-post_type menu-item-object-product menu-item-13296"><a href="https://www.lacefronts.com.au/?post_type=product&amp;p=13039">Build-a-Wig</a></li>
<li class="toppers menu-item menu-item-type-post_type menu-item-object-product menu-item-13379"><a href="https://www.lacefronts.com.au/product/toppers/">Toppers</a></li>
<li class="pony menu-item menu-item-type-post_type menu-item-object-product menu-item-13421"><a href="https://www.lacefronts.com.au/product/ponytails/">Ponytail Wigs</a></li>
<li class="humanhair menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1881"><a href="https://www.lacefronts.com.au/collection/human-hair-wigs/">Human Hair Wigs</a></li>
<li class="synthetic menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1882"><a href="https://www.lacefronts.com.au/collection/synthetic-wigs/">Luxe Synthetic Wigs</a></li>
<li class="matureicon menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-12341"><a href="https://www.lacefronts.com.au/collection/mature-styles/">Mature styles</a></li>
<li class="under100 menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-11864"><a href="https://www.lacefronts.com.au/collection/wigs-under-100/">Wigs under $100</a></li>
<li class="bundles menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-3675"><a href="https://www.lacefronts.com.au/collection/bundle-packs/">Bundle packs</a></li>
<li class="glue menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1885"><a href="https://www.lacefronts.com.au/collection/glues-grips-and-tapes/">Glues, tapes &amp; grips</a></li>
<li class="care menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-1884"><a href="https://www.lacefronts.com.au/collection/hair-care-and-accessories/">Hair care &amp; accessories</a><button class="sub-menu-toggle" aria-expanded="false" onclick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"></path></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"></path></svg></span><span class="screen-reader-text">Open menu</span></button>
<ul class="sub-menu">
    <li class="ponytails menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-5197"><a href="https://www.lacefronts.com.au/collection/fashion-ponytails/">Synthetic Ponytails</a></li>
</ul>
</li>
<li class="tutorials menu-item menu-item-type-post_type menu-item-object-page menu-item-3583"><a href="https://www.lacefronts.com.au/tutorials/">Tutorials</a></li>
<li class="nails menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1886"><a href="https://www.lacefronts.com.au/collection/press-on-nails/">Nails</a></li>
<li class="help menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2422"><a href="#">Help</a><button class="sub-menu-toggle" aria-expanded="false" onclick="twentytwentyoneExpandSubMenu(this)"><span class="icon-plus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" fill="currentColor"></path></svg></span><span class="icon-minus"><svg class="svg-icon" width="18" height="18" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11h12v2H6z" fill="currentColor"></path></svg></span><span class="screen-reader-text">Open menu</span></button>
<ul class="sub-menu">
    <li class="consult menu-item menu-item-type-post_type menu-item-object-page menu-item-12334"><a href="https://www.lacefronts.com.au/consultation/">Consultation</a></li>
    <li class="blogs menu-item menu-item-type-post_type menu-item-object-page menu-item-3096"><a href="https://www.lacefronts.com.au/blogs/">Blogs</a></li>
    <li class="faq menu-item menu-item-type-post_type menu-item-object-page menu-item-4328"><a href="https://www.lacefronts.com.au/faq/">FAQ</a></li>
    <li class="shipping menu-item menu-item-type-post_type menu-item-object-page menu-item-4287"><a href="https://www.lacefronts.com.au/shipping/">Shipping</a></li>
    <li class="financialassist menu-item menu-item-type-post_type menu-item-object-page menu-item-12971"><a href="https://www.lacefronts.com.au/financial-assistance-wigs/">Financial Assistance</a></li>
    <li class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-2426"><a href="https://www.lacefronts.com.au/contact/">Contact Us</a></li>
</ul>
</li>
</ul></div>
            </nav>

型
我试着添加：

#nav-primary :hover ul {left: 0px; top: 71px; background: none;

}
.sub-menu{
    display:none;
}

型
有谁能看到我遗漏了什么或者编码错误了吗？目标是当鼠标悬停在与之关联的主菜单项上时显示这些菜单项，而不仅仅是缩进。

下拉菜单WordPress

1条答案

相关问题

热门标签

最新问答