悬停时的CSS列表菜单子(monad)选择器

Question

我的CSS有问题，

我有一个列表菜单，我使用子选择器在菜单的一个区域创建一个间隙，

但是，在悬停时，背景色会占据整个宽度。 . .. 仅在 child 选择的元素上，我无法修复它，如果有人可以帮我吗？

你可以在这里看到它(它是菜单中的新闻中心部分):http://thibaultrolando.com/vinacotheque/new_home/这是我的 CSS:

.nav-menu{
border-top:2px solid #7f683e;

border-bottom:2px solid #7f683e;
}

.nav-menu li a
{
color:black !important;
display:block;
font-family:HelveticaCE-Cond;
font-size:20px;
font-style:normal!important;
line-height:1;
margin-left:auto!important;
margin-right:auto!important;
padding:15px 13px!important;
width:100%!important;
}

.nav-menu li:last-child a

{
border-right:none!important;
color:black !important;;
display:block;
font-size:20px;
font-style:normal!important;
line-height:1;
padding:15px 0px!important;
  }
.nav-menu li:nth-child(4) a:hover > a,.nav-menu li:nth-child(4) a:hover
{
border-right:none!important;
margin-left:365px !important;
color:white !important;
font-size:20px;
font-style:normal!important;
line-height:1;
background-color:#7f683e;
padding:15px 13px!important;
}

.nav-menu li:nth-child(4) a
{
border-right:none!important;
margin-left:365px !important;
color:black !important;;
font-size:20px;
font-style:normal!important;
line-height:1;
padding:15px 13px!important;
}

.navigation a:hover
{transition:0.6s ease 0s;
background-color:#812545;
color:black !important;
margin-left:auto!important;
margin-right:auto!important;
padding:none!important;
width:100%!important;
}

.nav-menu li:hover > a,.nav-menu li a:hover

{
background-color:#7f683e;
color:white !important;
margin-left:auto!important;
margin-right:auto!important;
padding:none!important;
width:100%!important;
}
.nav-menu {
margin-top:-60px;
 } 
.nav-menu .current_page_item > a,.nav-menu .current_page_ancestor > a,.nav-menu     .current-menu-item > a,.nav-menu .current-menu-ancestor > a
{
color:#bc360a;
font-style:none!important;
}

非常感谢你 :)

Answer 1

值得庆幸的是，这里的一个解决方案是简化您的 CSS。

1. 删除规则 .nav-menu li:nth-child(4) a:hover > a,.nav-menu li:nth-child(4) a:hover
2. 删除 #menu-menu 上的 40px 右填充(它不在上面的示例中，但在我访问您的网站时它在样式表中)
3. 将 .nav-menu li:nth-child(4) a 更改为 .nav-menu li:nth-of-type(4)

的确，您的 CSS 并不是最好的。进行上述更改后，您仍然会遇到几个问题。我建议您执行以下操作:

• 仅将悬停效果应用于 li 元素，而不是 anchor 元素。
• 避免对特定元素应用特殊填充和边距。您的设计需要对第 4 项使用特殊填充，这很好，但请避免在其他地方使用(例如 ul 中的右填充)。