时间戳

首页 > 解决方案 > Avada WordPress 主题：下拉子菜单上的圆角

css - Avada WordPress 主题：下拉子菜单上的圆角

问题描述

我正在使用 Avada 主题开发一个新的 WordPress 网站。为了使菜单更有魅力，我希望下拉子菜单的角是圆角的。

所以我尝试添加以下自定义 CSS 代码：

.sub-menu {
border-radius: 0 0 15px 15px;
overflow: hidden;}

嗯，这很有效，看起来不错。我现在面临的问题：在一种情况下，我需要一个额外的子菜单条目（所以一个子子菜单）。而且由于我使用的是“溢出：隐藏”，因此该站点不会向我显示第二个子菜单。

您知道如何使用 CSS noob 的工作子菜单来实现圆角吗？

感谢您的宝贵时间，感谢您的工作！

干杯，

缺口

圆角但没有子菜单

出现没有自定义 CSS 的子菜单

<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6 fusion-dropdown-menu" data-item-id="6" style="overflow: visible;">

<a href="#" class="fusion-bottombar-highlight" aria-haspopup="true"><span class="menu-text">Teamevents</span></a><ul class="sub-menu"><li id="menu-item-1377" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1377 fusion-dropdown-submenu">

//BEGINNING OF SUBMENU

<a href="LINK" class="fusion-bottombar-highlight"><span>Menu 1</span></a></li><li id="menu-item-1127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1127 fusion-dropdown-submenu">
<a href="LINK" class="fusion-bottombar-highlight"><span>Menu 2</span></a></li><li id="menu-item-371" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-371 fusion-dropdown-submenu">
<a href="LINK" class="fusion-bottombar-highlight" aria-haspopup="true"><span>Menu 3</span></a>

//BEGINNING OF SUB-SUBMENU ONE (won't be shown)

<ul class="sub-menu"><li id="menu-item-338" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-338"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 1</span></a></li></ul></li><li id="menu-item-1458" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1458 fusion-dropdown-submenu">

//END

<a href="#" class="fusion-bottombar-highlight" aria-haspopup="true"><span>Menu 4</span></a><ul class="sub-menu"><li id="menu-item-340" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-340">

//BEGINNING OF SECOND SUB-SUBMENU (won't be shown)

<a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 2</span></a></li><li id="menu-item-342" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-342">
<a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 3</span></a></li><li id="menu-item-343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 4</span>
</a></li><li id="menu-item-344" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-344"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 5</span></a>
</li><li id="menu-item-345" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-345"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 6</span></a></li></ul></li></ul></li>

标签： csswordpress

解决方案

尝试改用这些。

.avada-has-mainmenu-dropdown-divider .fusion-main-menu .fusion-dropdown-menu .sub-menu li:last-child a:hover{
  border-radius: 0 0 15px 15px !important;
}
.avada-has-mainmenu-dropdown-divider .fusion-main-menu .fusion-dropdown-menu .sub-menu li:last-child a{
  border-radius: 0 0 15px 15px !important;
  border: unset !important;
}
ul.sub-menu {
    border-radius: 0 0 15px 15px !important;
}

到实际站点的链接也很好。

推荐阅读