css - 导航菜单悬停状态

Question

我遇到了标题导航问题。我们想要做到这一点，当您将鼠标悬停在导航菜单中的某个元素上时，该部分将完全变为绿色。我的子菜单工作得很好，但主菜单项很困难，没有填满它们的部分，悬停在上面时会坐立不安。此外，当您向下钻取子菜单时，它会突出显示菜单顶部的主导航，即使您没有将鼠标悬停在它上面也是如此。

下面是我用来使子导航部分正常运行的部分 (style.css)。

.nav-menu li.current_page_parent > a, .nav-menu li > a:hover {
color: #fff;
padding: 6.5px 10px;
background-color: #009444;
display: block;
width: 100%;
margin: -7px 0px 0px -10px;}

任何帮助都会很棒!

主页 http://df50mobilewpe.wpengine.com

示例诊所页面 http://df50mobilewpe.wpengine.com/clinics/premier-health-care-finder_aberdeen-south-dakota_brown-county-community-health-center-2/

Answer 1

首先，去掉ul标签的边距

ul{
  list-style: none;
  margin: 0;
}

为什么？因为我们要在其他标签中添加这个边距

删除这些选择器，只保留 border-right: 0

.nav-menu li:first-child, .nav-menu li.first a, .footer-nav-menu li:first-child a, .footer-nav-menu li.first a {
    padding-left: 0;
}
.nav-menu li:last-child, .nav-menu li.last a, .footer-nav-menu li:last-child a, .footer-nav-menu li.last a {
    padding-right: 0;
    border-right: 0;
}
.nav-menu li.current_page_parent > a, .nav-menu li > a:hover {
    color: #fff;
    padding: 6.5px 10px;
    background-color: #009444;
    display: block;
    width: 100%;
    margin: -7px 0px 0px -10px;
}

添加这些选择器

.nav-menu > li{
  padding: 0 23px;
}
.nav-menu > li:hover{
  background-color: #009444;
  color: #fff;
}
.nav-menu > li > a{
  color: inherit
}