1

サブメニューの下の CSS を見てください。メインメニューに独自のものを指定した場合でも、メインメニューからすべてのスタイルを継承し続けます。

たとえば、MainMenu にパディングがあり、subMenu はそれ自体にもそれらを適用します。独自のパディングを指定しても、それらは使用されず、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 に答える