CSS는 색상을 변경하지 않습니다.

Question

템플릿을 구입하여 지난 며칠 동안이 작업을 수행했습니다. 내 재치가 끝났어. 나는 메인 네비게이션 컬러와 현재 선택된 페이지 컬러 위에 마우스를 올려 놓으려고 노력하고있다. 조언 좀 해줄 래?

코드가 첨부되어 있습니다.

nav#main-nav { 
    z-index: 50; 
    display: block; 
} 

nav#main-nav ul { 
    position: relative; 
    z-index: 49; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

nav#main-nav ul li { 
    position: relative; 
    z-index: 45; 
    float: left; 
    margin: 0 0 0 20px; 
    padding: 0; 
} 

nav#main-nav > ul > li > a { 
    display: block; 
    font-family: Ubuntu; 
    font-size: 13px; 
    line-height: 40px; 
    color: #ffffff; 
    text-decoration: uppercase; 
    position: relative; 
    z-index: 45; 
    padding: 20px 0; 
    letter-spacing: 0.1em; 
} 


nav#main-nav > ul > li:hover { 
    z-index: 46; 
    color: #ffffff; 
} 


nav#main-nav > ul > li.current-menu-item, 
nav#main-nav > ul > li.current-menu-ancestor { 
    color: #ffffff; 
    text-decoration: underline; 
} 


nav#main-nav ul li .sub-menu { 
    position: absolute; 
    top: 80px; 
    left: 0px; 
    width: 200px; 
    padding: 0; 
    display: none; 
    z-index: 47; 
} 

nav#main-nav ul .sub-menu li { 
    float: none; 
    border-top: 1px solid; 
    margin: 0; 
} 

nav#main-nav ul .sub-menu li:first-child { 
    border-top: none; 
} 

nav#main-nav ul .sub-menu li a { 
    color: #ffffff; 
    font-size: 12px; 
    line-height: 20px; 
    padding: 10px 20px; 
    display: block; 
} 

nav#main-nav ul .sub-menu li:hover { 
    background-color: #ffffff; 
} 

nav#main-nav ul .sub-menu li:hover a { 
    color: #ffffff; 
} 

nav#main-nav ul .sub-menu li.current-menu-item > a { 
    color: #ffffff; 
    text-decoration: underline; 
} 

nav#main-nav ul li ul li .sub-menu { 
    border-top: none; 
    position: absolute; 
    top: 0px; 
    left: 201px; 
} 

Answer 1

당신은 문제가 앵커가 위의 코드를 오버라이드 (override) 다른 스타일을 가지고 있다는 것입니다

nav#main-nav > ul > li:hover { 
    z-index: 46; 
    color: #ffffff; 
} 

있습니다. 그런 다음 사용하십시오

nav#main-nav > ul > li:hover { z-index: 46; } 
nav#main-nav > ul > li:hover > a { 
    color: #ffffff; 
}