css - 希望菜单和子菜单在悬停时的行为相同 - 当前项目的问题
问题描述
我正在一个网站上工作,除了一件事之外,我几乎按照我想要的方式拥有菜单。当我在主菜单中选择具有子项的项目时,父项的样式将应用于子菜单项,即,子菜单项看起来好像是“当前的”。我希望主菜单和子菜单在悬停(即选择主菜单项时都不将电流样式应用于子菜单项目)上相同。所以这些项目应该是黑色的,没有线条。
/* -------------------- Header -------------------- */
/* including image */
/* allow image to be at top with nav over it */
.et-l.et-l--header {
position: absolute;
width: 100%;
color: #fff;
}
#menu-main-menu .current-menu-item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#menu-main-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #A60207; /*** COLOR OF THE LINE ***/
height: 1px; /*** THICKNESS OF THE LINE ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#menu-main-menu li a:hover {
opacity: 1 !important;
}
#menu-main-menu li a:hover:before {
right: 0;
}
#menu-main-menu li li a {
color: black;
}
#menu-main-menu li li a:before {
bottom: 10%;
}
.et-menu .menu-item-has-children>a:first-child {
padding-right: 20px;
padding-bottom: 20px;
}
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
background-color: rgba(242,242,242,0.9)!important;
border-color: rgba(0,0,0,0);
}
/* -------------------- Sub-Menu -------------------- */
.nav li li {
position: relative;
line-height: 1.5em;
}
.et_pb_fullwidth_menu .et_pb_menu__menu>nav>ul>li>ul,
.et_pb_menu .et_pb_menu__menu>nav>ul>li>ul {
top: calc(100% - 1px);
left: 0;
}
.et_pb_fullwidth_menu .et-menu-nav>ul ul,
.et_pb_menu .et-menu-nav>ul ul {
padding: 10px 0;
text-align: left;
}
<div class="et_pb_menu__menu">
<nav class="et-menu-nav"><ul id="menu-main-menu" class="et-menu nav"><li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-161"><a href="https://hqelectricstag.wpengine.com/">HOME</a></li>
<li class="et_pb_menu_page_id-18 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-has-children menu-item-162"><a href="https://hqelectricstag.wpengine.com/about-high-quality-electric/" aria-current="page">ABOUT US</a>
<ul class="sub-menu">
<li class="et_pb_menu_page_id-186 menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="https://hqelectricstag.wpengine.com/testimonials/">Testimonials</a></li>
<li class="et_pb_menu_page_id-560 menu-item menu-item-type-post_type menu-item-object-page menu-item-565"><a href="https://hqelectricstag.wpengine.com/reviews/">Write a Review</a></li>
</ul>
</li>
<li class="et_pb_menu_page_id-541 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-546"><a href="https://hqelectricstag.wpengine.com/electrician-services/">SERVICES</a>
<ul class="sub-menu">
<li class="et_pb_menu_page_id-294 menu-item menu-item-type-post_type menu-item-object-page menu-item-296"><a href="https://hqelectricstag.wpengine.com/residential-electrician-services/">Home Electrician</a></li>
<li class="et_pb_menu_page_id-314 menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href="https://hqelectricstag.wpengine.com/commercial-electric-services/">Commercial Electrician</a></li>
<li class="et_pb_menu_page_id-466 menu-item menu-item-type-post_type menu-item-object-page menu-item-468"><a href="https://hqelectricstag.wpengine.com/outdoor-lighting/">Outdoor Lighting</a></li>
<li class="et_pb_menu_page_id-464 menu-item menu-item-type-post_type menu-item-object-page menu-item-479"><a href="https://hqelectricstag.wpengine.com/indoor-residential-lighting/">Indoor Lighting</a></li>
<li class="et_pb_menu_page_id-519 menu-item menu-item-type-post_type menu-item-object-page menu-item-521"><a href="https://hqelectricstag.wpengine.com/home-generator/">Home Generators</a></li>
</ul>
</li>
<li class="et_pb_menu_page_id-327 menu-item menu-item-type-post_type menu-item-object-page menu-item-511"><a href="https://hqelectricstag.wpengine.com/residential-electric-faqs/">FAQs</a></li>
<li class="et_pb_menu_page_id-105 menu-item menu-item-type-post_type menu-item-object-page menu-item-154"><a href="https://hqelectricstag.wpengine.com/contact/">CONTACT</a></li>
</ul></nav>
</div>
解决方案
虽然不是我想出了解决方案,但这里是解决方案(以防它帮助其他人)。它并没有像我想要的那样“轻松”,但我可以继续努力。有时,最难找到的是简单的解决方案!
.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a:not(:hover) {
color: #444444!important;
}
#menu-main-menu li a:not(:hover):before { background: transparent; }
推荐阅读
- python - 数字可以出现在海龟窗口中吗?
- android - AWS 设备场在 ipa 中找不到 .xctest
- database - SharePoint 2013 - 从 SharePoint DB 获取 SPSite.Url
- java - java中的垃圾收集器方法有什么用?
- .net-core - 请求令牌时如何传递附加参数
- database - 如何知道 liquibase 变更集是否足够安全以在数据库上运行
- swift - PromiseKit 在链接之前解包可选
- sql - 如何提高简单 sql 查询的性能?
- codeigniter - codeigniter 更新数量不起作用
- node.js - 关于nodejs程序错误