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

因为您希望整个列表项具有背景，只需将背景添加到列表项/ li元素。

变化：

.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: 6.5px 25px;
}

.nav-menu li.current_page_parent > a,
.nav-menu li > a:hover{
    color: #fff;
}

.nav-menu li.current_page_parent,
.nav-menu li:hover {
  background-color: #009444;
}

或类似的东西。

Answer 2

为什么世界上你会在悬停后改变填充和边距？只需在之前设置它们，并在悬停后可以更改背景

nav-menu li.current_page_parent>a, .nav-menu li>a:hover {
    color: #fff;
    background-color: #009444;
    display: block;
}

.nav-menu li a, .footer-nav-menu li a {
    text-decoration: none;
    width: 100%;
    padding: 6.5px 10px;
    height: 100%;
    margin: -7px 0 0 -10px;
}

这将删除烦躁不安。

由于您希望项目完全为绿色，因此您需要将background绿色应用于li

.nav-menu li:hover {
        background-color: #009444;
    }

Answer 3

首先，从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
}

导航菜单悬停状态

3 个答案: