CSS导航栏菜单无法正常工作

Question

我有这样的HTML代码

<div id="navbar"> 
    <ul> 
     <li><a href="#">Page1</a></li> 
     <li><a href="#">page2</a></li> 
    <li id="NavItem"> 
     <a href="#">page3</a> 
     <div id="PopOver"> 
      <div class="ow-button"> 
       <a href="#">xnewPage1</a> 
       <a href="#">xnewPage2</a> 
       <a href="#">xnewPage3</a> 
      </div> 
     </div> 
    </li> 
     <li><a href="#">page4</a></li> 
    </ul> 
</div> 

CSS代码

#navbar { position: relative; margin: 3px; } 
#navbar ul { 
    padding: 0; 
    margin: auto; 
    background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; 
    padding: 4px 0 4px 0; 
} 
#navbar li { display: inline; margin-right: 80px; } 
#navbar li a { 
    font-family: EqualSansDemo; 
    font-size: 1.6em; 
    color: #555555; 
    text-shadow: 1px 1px 0px #fff; } 
#navbar li a:hover { color: #0071e4; } 

#PopOver { 
    position:absolute; 
    border:2px solid #07B1F1; 
    width:170px; 
    height:auto; 
    padding:15px 5px 10px 5px; 
    display:none; 
    top:30px; 
    left:229px; 
    background-color:#FFFFFF; 
    border-radius:8px; 
    -moz-border-radius:8px; 
    -webkit-border-radius:8px; 
} 

#NavItem:hover #PopOver {display:block} 


.ow-button a { 
    display: block; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    width: 160px; 
    height: 28px; 
    font-family: Arial, "Nimbus Sans L", "FreeSans"; 
    font-size: 14px; 
    font-weight: bold; 
    color: #FFFFFF; 
    text-align: center; 
    line-height: 28px; 
    text-shadow: 1px 1px 1px #6A6A6A; 
    text-decoration:none; 
    margin: 0px 5px 10px 5px; 
    background: #28A9FF; 
} 

.ow-button a:hover { 
    background: #48B6FF; 
} 

问题：

“#navbar李一” 将隐藏：

font-family: Arial, "Nimbus Sans L", "FreeSans"; 
font-size: 14px; 
color: #FFFFFF; 
text-shadow: 1px 1px 1px #6A6A6A; 

其中“ow-button a”have..and将启用它自己的。

而我不想那样......我如何启用完整的“ow-button a”CSS代码？

Answer 1

快速和肮脏的解决方案是将!important添加到您的ow-button a将覆盖#navbar li a。

更好的解决方案是使用更好的作用域CSS。使用诸如>之类的选择器来精确指定您想要的元素。在你的情况下，它应该是这样的：

#navbar > ul > li > a 

我为你jsFiddle：http://jsfiddle.net/6NrWF/。