css - 样式应用到错误的地方

Question

请帮忙，我试图简单地在子菜单的最后一个元素上添加一个边框，并为子菜单元素添加文本缩进，但由于某种原因，它只是应用了页面顶部的所有内容，请查看下图，由于某种原因，它在页面顶部应用了更改，而不是在它自己的元素上！

实时预览： http: //leo.meeped.co.uk/

提前致谢。

这是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 id="MainMenu"> 
                    <ul class="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>

这是CSS代码：

body{
    line-height: 120%;
}

/*Additions*/
.scrollable{
    overflow: auto;
    -webkit-transition-property: top, bottom;
    transition-property: top, bottom;
    -webkit-transition-duration: .2s, .2s;
    transition-duration: .2s, .2s;
    -webkit-transition-timing-function: linear, linear;
    transition-timing-function: linear, linear;
    -webkit-overflow-scrolling: touch;
}

/*Pages Overall Styling*/ #Page{
    position: relative;
    padding-top: 0px;

    z-index: 2;

    -webkit-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    -3px 0px 20px rgba(0, 0, 0, 0.25);
    box-shadow:         -3px 0px 20px rgba(0, 0, 0, 0.25);  
}

/*Content Containers Overall Styling*/.content{
    width: 800px;
}   

/*Header Containers Overall Styling*/#headerContent{
    max-width: 100%;
    height: 100%; 

    position: fixed;
    margin: auto; 
}

#wrapperHeader{
    background-color: #2D3B53;
    border-bottom: none;

    width: 230px;
    height: 100%;

    position: fixed;
    padding: 0px;

    z-index: 1;
}

/*Main Header Elements*/
.headerLogo, #LogoImage{
    display: none;
}

#headerMenu{
    max-width: 230px;
    float: none;
}

/*Main Menu*/
#MainMenu li{
    padding: 0px;
    float: none;
}

#MainMenu a{
    color: #E0E5EE; 
    border-bottom: 1px solid #253145;   

    width: 100%;
    line-height: 50px;

    text-align: left;  
    text-indent: 20px; 
    float: left; 

   -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box; 
}       

#MainMenu a:hover{
    color: #B8C4D8; 
    background-color: #3D567B;
}   

#MainMenu a.active{
    display: none;
}

#MainMenu li a.getStartedButton{
    color: #74ADB4;
}

#MainMenu li a.getStartedButton:hover{
    background-color: #74ADB4;
    color: #D4E6E8;
}       

/*SubMenu*/
ul.subMenu{
    background-color: #33435F;
    border: 1px solid #DDDDDD;

    display: none;
    padding: 0;
    position: relative;
    top: 0; left: 0;

    -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{
    width: 230px;
    border-bottom:1px solid #DDDDDD;
}

/*Second Header Container & Elements (Hidden From Widescreen)*/
#SecondHeader{
    background-color: #3D5273;

    width: 100%;
    line-height: 50px;
    text-align: left;

    display: inline-block;
}

.SecondHeader-button{
    color: #FFFFFF;
    background: #3D5273 url('../../assets/elements/nav-icon.png') no-repeat 10px center;

    font-size: 15px;
    font-weight: bold;
    text-indent: 45px; 

    display: inline-block;
}

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

Answer 1

subMenu 和 SubMenu 是一回事吗？如果是这样，您需要在 HTML 中更改它。也许这就是你问题的答案？

Answer 2

像这样使用伪类 :last-child ：

nav ul li:last-child {
    //style
}