Styling applied to the wrong place - css

Question

Please help, I am trying to simply add a border at the last element of my sub menu and text indent for the sub-menu elements, but for some reason it just applies everything on the top of the page, please take a look at the image below, it applies the changes on the top of the page for some reason and not on the elements it self!
for Live preview: http://leo.meeped.co.uk/
Thanks in advance.
Here is the HTML code:
<header>
<div id="wrapperHeader">
<div class="scrollable" id="headerContent">
<section class="headerLogo">
<img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/>
</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>Web Design</li>
<li>Visual Identity</li>
<li>Photography</li>
</ul>
</li>
<li>Testimonials</li>
<li>About Me</li>
<li>Get In Touch</li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
</nav>
</section>
</div>
</div>
</header>
Here's the CSS Code:
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

Use pseudo class :last-child like this:
nav ul li:last-child {
//style
}

Answer 2

Are subMenu and SubMenu the same thing? If so, you need to change that in your HTML. Maybe that's the answer to your problem?