1

请看一下 subMenu 下面的 CSS，即使我给了它自己的样式，它仍然继承了 MainMenu 的所有样式！

例如，MainMenu 上有填充，子菜单也将它们应用于自身，即使我给它自己的填充它也不会使用它们，它仍然会使用 MainMenu 上的填充，请帮助，提前谢谢...

#headerMenu{
    float: right;
}

/*Main Menu*/
#MainMenu li{
    padding: 8px 12px 5px 12px;
    position: relative;
    list-style: none;
    float: left;
}

#MainMenu a{
    color: #757575; 
}       

#MainMenu a:hover{
    color: #7FA0BA; 
}   

#MainMenu a.active{
    color: #305067; 
}

#MainMenu li a.getStartedButton{
    color: #A3C182;
}

#MainMenu li a.getStartedButton:hover{
    color: #7FA0BA;
}

/*SubMenu*/
ul.subMenu{
    background-color: #FFFFFF;
    border: 1px solid black;

    position: absolute;
    top: 49px;

    -webkit-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43);
    -moz-box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43);
    box-shadow: 0px 4px 15px -5px rgba(0,0,0,0.43);
}

.subMenu li{
    background-color: orange;

    width: 95px;

    padding: 2px 2px 2px 3px;
    position: relative;

    text-align: left;
    list-style: none;

}

.subMenu li a{
    background-color: black;
}

/*Tablets & Smart Phones (Must Be Hidden From Widescreen)*/
.SecondHeader-button,#SecondHeader{
    display: none;
}

/*////////////////////////////*/

HTML如下：

<header>
            <div id="wrapperHeader">
                <div class="scrollable" id="headerContent">
                    <section class="headerLogo">
                        <a href="index.html"><img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/></a>
                    </section>
                    <section id="headerMenu">
                        <nav>
                            <ul id="MainMenu">
                                <li><a class="active" href="index.html">Home</a></li>
                                <li><a class="SubMenu" href="#">Portfolio</a>
                                    <ul class="subMenu">
                                        <li><a href="web-design.html">Web Design</a></li>
                                        <li><a href="visual-identity.html">Visual Identity</a></li>
                                        <li><a href="photography.html">Photography</a></li>
                                    </ul>
                                </li>
                                <li><a href="testimonials.html">Testimonials</a></li>
                                <li><a href="about.html">About Me</a></li>
                                <li><a href="contact.html">Get In Touch</a></li>
                                <li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
                            </ul>
                        </nav>
                    </section>
                </div>
            </div>
        </header>
4

1 回答 1

2

根据CSS Specificity Rules

#MainMenu li

比更具体

.subMenu li

这就是为什么后者 ( .subMenu li) 不会覆盖前者 ( #MainMenu li) 的原因。

尝试：

#mainMenu .subMenu li

并阅读http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2013-07-15T09:15:41.040 回答