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 li a”将隐藏：

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

哪个“ow-button a”有......并且会启用它自己的。

我不希望这样......我如何启用完整的“ow-button a”CSS代码？

Answer 1

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

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

#navbar > ul > li > a

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

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

1 个答案: