风格敏感的导航菜单

我想风格我的响应导航下拉菜单和更改背景颜色，但似乎无法弄清楚。我希望下面列表中的项目具有#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; 

} 
}

来源

2017-07-25 Adan Burlington

我不知道你在哪里试图设置它在您的问题中列出的CSS中。

我想

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

会做，如果你不具备这种抵消它的另一个说法。如果你这样做，在ul中添加另一个类，这样你可以使你的选择器专用于这个实例。

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

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

来源

2017-07-25 00:51:59

这样做了....谢谢！对不起，应该提到，在我尝试ul.nav.hidden li之前，忘记了“a”.....再次感谢！ –

ul li { 
    background-color: #cccccc; 
}

来源

2017-07-25 00:44:03

风格敏感的导航菜单

回答

相关问题