0

I have this HTML code

<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 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?

4

1 回答 1

2

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/.

于 2013-04-20T20:19:50.380 回答