2014-03-03 177 views
1

购买了一个模板,并且在过去的几天里一直在为此工作。现在我的智慧结束了。我试图改变悬停在主导航颜色和当前选择的页面颜色,无济于事。请指教?CSS不会改变颜色

附上代码。

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; 
} 
+0

这很可能是您正在修改的规则正在被其他规则替换。检查该元素(在许多浏览器中,您可以通过右键单击并选择“检查元素”来完成此操作),并在开发人员工具中检查其样式。如果此页面在某个位置在线,我们可以帮助您确定问题所在。 – Sampson

+0

你可以发布'nav' HTML吗? – TylerH

+0

你可以发布导航HTML? – TylerH

回答

0

你有

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; 
}