Question

我正在尝试设置响应式导航下拉菜单的样式并更改背景颜色，但似乎无法弄明白。我希望下面列表中的项目具有#cccccc的灰色背景。

HTML：

@media screen and (max-width : 1100px){
ul.nav
{ position: static;
  display: none;}

li.nav {margin-bottom: 1px;}

ul.nav li, li.nav a {width: 100%;}

.show-menu {display:block;}

li.nav > ul.hidden { 
display: block !important;

}
}

响应式CSS：

{{1}}

Answer 1

ul li {
  background-color: #cccccc;
}

Answer 2

我没有看到您在问题中列出的CSS中设置它的位置。

我会想

ul.nav.hidden li a {
     background-color: #cccccc;
}

如果你没有另外的声明来抵消它，

会这样做。如果这样做，请向ul添加另一个类，以便您可以使选择器特定于此实例。

如果您的li有填充，请将“a”从选择器中删除或添加“ul.nav.hidden li”作为第二个选择器。

是的，你有几个地方的“li.nav”。对于html的这一部分，至少，你的lis没有类“nav”，而是在一个带有“nav”类的元素中，所以如果你试图定位那些它应该是“.nav li”。 ; - ）

风格响应导航菜单

2 个答案: