本文目錄導(dǎo)讀：

1. 使用CSS樣式表
2. 使用JavaScript動(dòng)態(tài)改變顏色
3. 使用CSS偽類改變顏色

CSS二級(jí)菜單變色，輕松打造個(gè)性導(dǎo)航

在網(wǎng)頁(yè)設(shè)計(jì)中，CSS二級(jí)菜單的變色是一個(gè)常見(jiàn)的需求，通過(guò)改變二級(jí)菜單的顏色，可以使其更加突出、醒目，提升用戶體驗(yàn)，如何給CSS二級(jí)菜單變色呢？

使用CSS樣式表

CSS樣式表是改變網(wǎng)頁(yè)元素樣式的***有效方法，通過(guò)給二級(jí)菜單所在的HTML元素添加CSS樣式，可以輕松改變其顏色，假設(shè)二級(jí)菜單所在的HTML元素是<ul>，可以使用以下CSS代碼將其顏色變?yōu)樗{(lán)色：

ul {
    color: blue;
}

使用JavaScript動(dòng)態(tài)改變顏色

除了使用CSS樣式表外，還可以使用JavaScript來(lái)動(dòng)態(tài)改變二級(jí)菜單的顏色，可以使用以下JavaScript代碼將二級(jí)菜單的顏色隨機(jī)改變：

var colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'brown', 'gray', 'black', 'white'];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('my-menu').style.color = randomColor;

這段代碼會(huì)隨機(jī)選擇一種顏色，并將其應(yīng)用到ID為my-menu的HTML元素上。

使用CSS偽類改變顏色

CSS偽類也可以用來(lái)改變二級(jí)菜單的顏色，可以使用以下CSS代碼將鼠標(biāo)懸停在二級(jí)菜單上時(shí)顏色變?yōu)榧t色：

ul li:hover {
    color: red;
}

這段代碼會(huì)將鼠標(biāo)懸停在<li>元素上時(shí)顏色變?yōu)榧t色。

通過(guò)以上三種方法，可以輕松給CSS二級(jí)菜單變色，打造出個(gè)性、醒目的導(dǎo)航欄。