如何在用户点击时更改导航栏项目的颜色？

Question

我有一项任务，当我将它悬停在粉红色的导航栏上时，我的导航栏中的第一级项目会变成粉红色，而当我将它们悬停时，第二级项目应该默认为粉红色，蓝色为蓝色。

实际上，第一层的颜色没有改变，第二层的颜色没有改变，第二层的颜色没有改变。

这里是我的代码：

html .nav .item .dropdown, 
body .nav .item .dropdown, 
html .nav .item .dropdown-menu, 
body .nav .item .dropdown-menu { 
    background-color: HotPink; 
} 

html .nav .item .dropdown .active:hover, 
body .nav .item .dropdown .active:hover, 
html .nav .item .dropdown-menu .active:hover, 
body .nav .item .dropdown-menu .active:hover, 
html .nav .item .dropdown .inside_item, 
body .nav .item .dropdown .inside_item, 
html .nav .item .dropdown-menu .inside_item, 
body .nav .item .dropdown-menu .inside_item { 
    text-transform: none; 
} 
html .nav .item .dropdown .active:hover:hover, 
body .nav .item .dropdown .active:hover:hover, 
html .nav .item .dropdown-menu .active:hover:hover, 
body .nav .item .dropdown-menu .active:hover:hover, 
html .nav .item .dropdown .inside_item:hover, 
body .nav .item .dropdown .inside_item:hover, 
html .nav .item .dropdown-menu .inside_item:hover, 
body .nav .item .dropdown-menu .inside_item:hover { 
    background-color: lightSkyBlue; 

怎样做才能使他们的工作？

Answer 1

它应该是相当简单和直接。

它应该看起来像这样;

/*正常状态*/

.dropdown { 
background-color: //color; 
} 

如果你想，当你悬停在您添加改变 颜色下拉的

;

.dropdown:hover { 
background-color: //color; 
} 

如果你走得更深一层;

.dropdown .active { 
//color 
} 

如果你想改变悬停的bg颜色;

.dropdown .active:hover { 
//color}