我在编辑主题导航菜单时遇到问题。我正在使用 Avada Wordpress 主题。这是我正在处理的网站 http://192.185.2.154/~sogo/tempsourceoneevents.com/
当我处于没有子级别的父级别时,当前页面代码有效。如果您去参展商服务 -) 电气。子 li 有正确的代码,但父级丢失了背景颜色。
当我将鼠标悬停在导航的子部分上时,我也遇到了麻烦。如果我越过 "departments 然后将鼠标悬停在 expo 上,departments 会丢失白色文本。这一定是因为我将 a 颜色设置为蓝色。
我用于导航的 CSS
#wrapper .header-social {
background-color: #536F9E !important;
}
#nav ul li:hover {
background-color: #536F9E !important;
}
#wrapper .header-social .menu > li, .mobile-menu-sep {
border-color: #385077 !important;
}
li.current_page_item, li.current_page_item a {
background-color: #536F9E !important;
color: #ffffff !important;
}
#wrapper #nav ul li ul li > a:hover {
color: #fff;
background-color: #536F9E !important;
}
#nav ul li ul li {
border-bottom: 1px solid #F1F1F1;
}
#wrapper .nav-holder li li > a, .top-menu li > a {
transition: color 0 ease-in-out, border-color .2s ease-in-out;
-o-transition: color 0 ease-in-out, border-color .2s ease-in-out;
-moz-transition: color 0 ease-in-out, border-color .2s ease-in-out;
-webkit-transition: color 0 ease-in-out, border-color .2s ease-in-out;
}
#nav ul li {
padding: 0 !important;
border-right: 1px solid #d7d7d7;
}
#nav ul li a {
padding: 0 13px !important;
}
#nav ul li ul li a {
padding: 7px 33px !important;
}
#nav ul li:last-child {
border-right: 0 !important;
}
#nav ul li.last-menu-item {
padding-right: 13px !important;
}
.header-v4 #header .search {
margin-top: 15px !important;
}
.header-v4 #small-nav, .header-v5 #small-nav {
background: rgba(247,247,247,1);
background: -moz-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(232,232,232,1) 100%);
background: -webkit-gradient(left top,left bottom,color-stop(0%,rgba(247,247,247,1)),color-stop(100%,rgba(232,232,232,1)));
background: -webkit-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(232,232,232,1) 100%);
background: -o-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(232,232,232,1) 100%);
background: -ms-linear-gradient(top,rgba(247,247,247,1) 0%,rgba(232,232,232,1) 100%);
background: linear-gradient(to bottom,rgba(247,247,247,1) 0%,rgba(232,232,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#e8e8e8',GradientType=0);
}
#wrapper .page-title h1, .page-title ul li, .page-title ul li a {
color: #fff !important;
}
最佳答案
Wordpress 在导航中有父页面的类,所以只需将 .current-menu-ancestor 和 .current-menu-parent 添加到 :hover
#nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a {
background-color: #536f9e !important;
color: #ffffff !important;
}
关于css - 父 li 在子列表项上时保持颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26787457/