css - 样式响应式导航菜单

Question

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

完整站点位于此处: http://adanburlington.com/giotto2/index.html

HTML:

<ul class="nav hidden">
<li><a href="#" onclick="navFire()">Fire Alarm Systems</a></li>
<li><a href="#" onclick="navSecurity()">Security & Intrusion</a></li>
<li><a href="#" onclick="navTV()">Closed Circuit TV</a></li>
<li><a href="#" onclick="navAccess()">Access Control</a></li>
<li><a href="#" onclick="navInt()">Systems Integration</a></li>
</ul>

响应式 CSS:

@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;

}
}

Answer 1

我看不到您在问题中列出的 CSS 中尝试设置它的位置。

我觉得

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

如果你没有其他的声明来抵消它，你会这样做。如果这样做，请向 ul 添加另一个类，以便您可以使选择器特定于此实例。

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

顺便说一句，您有几个地方有“li.nav”。对于 html 的这一部分，至少，您的 lis 没有类“nav”，而是位于类“nav”的元素内，因此如果您试图定位这些元素，它应该是“.nav li”。 ;-)