風格敏感的導航菜單

我想風格我的響應導航下拉菜單和更改背景顏色，但似乎無法弄清楚。我希望下面列表中的項目具有#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

風格敏感的導航菜單

回答

相關問題