CSS navbar menu doesn't work correctly - html

Question

I have this HTML code
<div id="navbar">
<ul>
<li>Page1</li>
<li>page2</li>
<li id="NavItem">
page3
<div id="PopOver">
<div class="ow-button">
xnewPage1
xnewPage2
xnewPage3
</div>
</div>
</li>
<li>page4</li>
</ul>
</div>
CSS code
#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;
}
The problem:
"#navbar li a" will hide:
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-size: 14px;
color: #FFFFFF;
text-shadow: 1px 1px 1px #6A6A6A;
Which "ow-button a" have..and will enable its own.
And I don't want that... How do I enable the full "ow-button a" CSS code?

Answer 1

The quick and dirty solution is to add !important to your ow-button a which will override #navbar li a.
The better solution is to use better scoped CSS. Use selectors like > to specify exactly the element you want to. In your case, it should look like this:
#navbar > ul > li > a
I made a jsFiddle for you: http://jsfiddle.net/6NrWF/.