首页 > 解决方案 > wordpress - 下拉菜单指示器

问题描述

我决定在 #COVID19 Lockdown 期间学习 wordpress。

在我的主菜单中,我为父母和孩子使用了下拉指示器。在指示箭头之后,出现另一个“方形”不受欢迎的字符。

在此处输入图像描述

我尝试编辑子主题中的 stlye.css 如下,

.main-navigation .menu-item-has-children a:after {display: none;} 

这不能解决问题。

任何解决问题的帮助将不胜感激。

/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


.fusion-main-menu>ul>li>a{height: auto !important; padding: 25px 0;}
.fusion-header > .fusion-row{display: flex; align-items: center;}
.fusion-main-menu{margin-left: auto;}
.main-navigation .menu-item-has-children a::after,a::before {content: '';} 
.fusion-main-menu .fusion-dropdown-menu .sub-menu li a{line-height: 1.55;}
.fusion-image-wrapper .fusion-rollover{background: rgba(110,50,118,0.9) !important;}
#newsLetterFormDiv{max-width: 500px; width: 100%; margin: 0 auto; text-align: center;}
#newsLetterFormDiv input[type="email"]{ background: #6d2761; display: block; margin-bottom: 15px; border: solid 1px #ab5d9d; border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; }
#newsLetterFormDiv input[type="submit"]{ display: inline-block; width: auto; background: #4eb852;  }
#newsLetterFormDiv input[type="submit"]:hover{opacity: 0.65;}
#gallery-1 .gallery-item{box-sizing: border-box; padding: 0 10px;}
.fusion-header > .fusion-row{display: flex; align-items: center;}
.fusion-header > .fusion-row > .fusion-main-menu{margin-right: auto; order: 1; margin-left: 0;}
.fusion-header > .fusion-row > .fusion-logo{margin-left: auto; order: 2;}

.tfs-slider .slide-content{ box-sizing: border-box; padding: 25px; background: #6e3276; }
.tfs-slider .slide-content h2.title-heading-center{font-size: 50px !important; line-height: 1.1 !important;}
.tfs-slider .slide-content h3.title-heading-center{font-size: 24px !important;}
.tfs-slider .slide-content-container{ width: auto; left: auto; right: 0; transform:none ; -webkit-transform:none ; -moz-transform:none ; -ms-transform:none ; -o-transform:none ; bottom: 0; padding: 0 !important; top: auto !important; }
#eduPhilosophyBox .flip-box-inner-wrapper{min-height: 350px !important;}
#philoRow .fusion-image-carousel{margin-bottom: 0;}
#philoRow  .fusion-carousel-wrapper{padding: 0; margin: 0;}
#ourProgramsRowSection .fusion-title.fusion-title-center{margin-bottom: 0;}
#ourProgramsRow > .fusion-row{max-width: 1020px !important;} 
#recentPostColum .fusion-title{margin-bottom: 0 !important;}
#recentPostColum .fusion-recent-posts{margin-bottom: 0 !important;}
#homeEventListing .fusion-events-post{margin-bottom: 0 !important;}
#homeEventListing .fusion-events-meta h2{font-size: 19px !important; text-transform: none;}


#homeGalList{list-style: none; margin:0; padding: 0; margin-bottom: 20px; overflow: hidden; }
#homeGalList > li{width: 50%; box-sizing: border-box; padding: 5px; float: left;}
#homeGalList > li:nth-child(2), #homeGalList > li:nth-child(3){padding: 5px 10px;}
#homeGalList > li >a{position: relative; display: block; overflow: hidden;}
#homeGalList > li >a img{ display: block; width: 100%; transition:all ease 0.2s ; -webkit-transition:all ease 0.2s ; -moz-transition:all ease 0.2s ; -ms-transition:all ease 0.2s ; -o-transition:all ease 0.2s ; }
#homeGalList > li >a h4{background: #6e3276; color: #fff; margin: 0; line-height: 1.1; padding: 10px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; width: 100%; }
#homeGalList > li >a:hover img{ transform:scale(1.1) ; -webkit-transform:scale(1.1) ; -moz-transform:scale(1.1) ; -ms-transform:scale(1.1) ; -o-transform:scale(1.1) ; }

.hmteaseBlock > .fusion-column-wrapper{opacity: 0; position: relative; z-index: 2;}
.hmteaseBlock:hover > .fusion-column-wrapper{opacity: 1;}
.hmteaseBlock > .fusion-column-inner-bg{ z-index: 1;}
.hmteaseBlock > .fusion-column-inner-bg a > span:before{ content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; transition:all ease 0.3s ; -webkit-transition:all ease 0.3s ; -moz-transition:all ease 0.3s ; -ms-transition:all ease 0.3s ; -o-transition:all ease 0.3s ; }
.hmteaseBlock:hover > .fusion-column-inner-bg a > span:before{opacity: 1;}


.fusion-page-title-bar{position: relative;}
.fusion-page-title-bar:after{content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5);  z-index: 1; }
.fusion-page-title-bar .fusion-page-title-row{position: relative; z-index: 2;}
.founderText{color: #fff;}
.peadalogyLadContentBox .content-container{box-sizing: border-box; padding: 15px; }
#aboutLAcontBox .content-box-column{ margin-top: 90px;}

#menu-program > li{border: 0 !important;}
#menu-program > li > a{box-sizing: border-box; padding:5px 10px; background:#4eb852; color: #fff; font-weight: bold; display: block; }
#menu-program > li > a:before, #menu-program > li > a:after{display: none;}
#menu-program > li > .sub-menu > li:last-child{border: 0 !important;}

标签: csswordpressmenu

解决方案


尝试使用浏览器的开发人员工具检查该元素。它应该向您显示正在应用于元素的样式以及它们的来源。

在 WordPress 的许多情况下,有一个插件在主样式表之后添加样式,因此覆盖它们,或者通过 JavaScript 添加内联样式。


推荐阅读