Question

我的css有问题，

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

然而，在悬停时，背景颜色是全宽的。。 ..只有在孩子选择的元素上，我无法解决它，如果有人可以帮我的话？

你可以在这里看到它（这是菜单中的新闻中心部分）：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;
}

非常感谢myuch：）

Answer 1

谢天谢地，这里有一个解决方案可以简化你的CSS。

删除规则.nav-menu li:nth-child(4) a:hover > a,.nav-menu li:nth-child(4) a:hover
在#menu-menu上删除40px的右边填充（上面的示例中没有，但是当我点击你的网站时，它会在样式表中显示）
将.nav-menu li:nth-child(4) a更改为.nav-menu li:nth-of-type(4)

你的CSS不是最好的，这是真的。进行上述更改后，您仍会遇到几个问题。我建议你做以下事情：

仅将悬停效果应用于li元素，而不是锚元素。
避免对特定项目应用特殊填充和边距。你的设计需要为第4项使用特殊的填充，这很好，但在其他地方避免使用（如ul中的右边填充）。

Answer 2

我将背景设置为预期宽度，您可以看到here，但我必须隐藏您的徽标才能这样做。为了使这个元素达到预期的宽度，我必须删除这一行CSS。

    .nav-menu li:nth-child(4) a:hover > a, .nav-menu li:nth-child(4) a:hover {
            margin-left: 365px !important;
     }

另一方面，看起来你有一些整体结构问题。如果我正在构建一个带有徽标的导航栏，我会使用整个无序列表，并将徽标作为中心列表项。而不是拥有整个导航栏结构并在其上放置徽标。有点像JSFiddle.。有点粗略的模拟，但你明白了。如有任何问题，请随时与我们联系。

hss上的css列表菜单子选择器

2 个答案: