submenu 相关问题

我正在使用 vuejs3 和 element-plus 开发一个网站，应该有一些子菜单，但是当你使用我正在使用 vuejs3 和 element-plus 开发一个网站，应该有一些子菜单，但是当你使用时 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" > <el-sub-menu class="submenu" index="1"> <template #title>1. Introductions</template> <el-menu-item index="1-1">item one</el-menu-item> <el-menu-item index="1-2">item two</el-menu-item> <el-menu-item index="1-3">item three</el-menu-item> </el-sub-menu> <el-menu> 它提供了一个默认的下拉箭头，单击该箭头将显示子菜单中的元素，并且无法直接访问以更改箭头的外观，就像使用您自己的箭头样式一样。如果您知道如何更改箭头，请帮助我。谢谢你展开关闭图标 && 展开打开图标

vuejs3 submenu element-plus

回答 1 投票 0

无法使用 OOP 连接到 add_submenu_page() 中的函数

这是我第一次在 WordPress 插件中过渡到 OOP。我正在尝试在“设置”中创建一个子菜单以及相关的功能来驱动管理屏幕。下面的代码创建菜单项

wordpress oop plugins submenu

回答 1 投票 0

Blazor 顶部水平导航栏带有可折叠子菜单

我正在 Blazor 中使用导航栏，该导航栏沿着页面顶部而不是标准位置水平运行。我需要为菜单选项之一添加可折叠子菜单。我尝试使用...

menu blazor navbar submenu

回答 1 投票 0

下拉子菜单wordpress

当前子菜单永久显示。我正在尝试创建它，以便将鼠标悬停在子菜单上时出现。这是我到目前为止所拥有的，但我缺少一些东西...... php 当前子菜单永久显示。我正在尝试创建它，以便将鼠标悬停在子菜单上时出现。这是我到目前为止所拥有的，但我缺少一些东西...... php <a href="javascript:void(0);" class="site-mobile-menu-icon" onclick="openMenu()"><i class="fas fa-bars"></i></a> <div class="site-mobile-menu-overlay" onclick="closeMenu()"></div> <div class="site-mobile-menu-container"> <a href="javascript:void(0);" class="site-mobile-menu-close" onclick="closeMenu()"><i class="fas fa-times"></i></a> <?php echo do_shortcode('[aws_search_form id="2"]'); ?> <?php if ( has_nav_menu( 'menu-mobile' ) ) : ?> <nav id="mobile-menu" class="mobile-menu"> <?php wp_nav_menu( array( 'theme_location' => 'menu-mobile', 'menu_class' => 'menu-wrapper', 'container_class' => 'menu-mobile-container', 'items_wrap' => '<ul id="menu-mobile-list" class="%2$s">%3$s</ul>', 'fallback_cb' => false, ) ); ?> </nav> <?php endif; ?> </div> 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&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 & 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 & 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; } 任何人都可以看到我缺少什么或编码错误吗？目标是当鼠标悬停在与其关联的主菜单项上时显示子菜单项，而不仅仅是缩进。 ul.sub-menu { display: none; } .menu-item-has-children:hover .sub-menu { display: block; } 这就是你想要实现的目标吗？

html css wordpress submenu

回答 1 投票 0

CSS - 如何将子菜单推到左侧？

我创建了一个带有水平子菜单的水平菜单。虽然我希望所有子菜单都被推到左边，就像第一个子菜单一样。我怎样才能做到这一点？我对 CSS 非常（非常）陌生。我...

html css submenu

回答 2 投票 0

Avada 没有选项可以更改 avada 主题编辑器中的子菜单悬停文本颜色。如何更改我的子菜单的悬停文本颜色？

我想更改悬停时的 avada 子菜单文本颜色，如下图所示。我努力在主题编辑器中找到默认选项，但没有找到。

css wordpress menu header submenu

回答 2 投票 0

如何在子菜单打开时保持悬停启用

我的网站上有一个简单的表格，列出了设备及其特性（在下面链接的示例中将有该表格的缩短版本）。导入“./styles.css”；小鬼...