Navigation bar error in CSS - html

Question

I am new to CSS and I need help with the navigation bar. I need to get the sub-topic right under the ABOUT US part but I cannot get it, it appears all the way to the right. Anything would be appreciated.
I can provide the HTML file if you need.
CSS:
container{
position: relative;
height: 70px;
width: 1100px;
}
.masthead{
background: #039be5;
width: 100%;
top: 0;
position: fixed;
color: white;
}
.logo{
position: relative;
float: left;
left: 90px;
font-family: Josefin Slab;
font-size: 21px;
top: 17px;
}
.logo h1 a {color: white; text-decoration: none; }
h1{
margin: 0;
}
a:link {color: white; text-decoration: none; }
a:visited {color: white; text-decoration: none; }
a:hover {color: white; color: black; }
a:active {color: white; text-decoration: none; }
#navcontent{
word-spacing: 4px;
}
li{
position: relative;
left: 155px;
list-style: none;
font-family: Raleway;
float: left;
margin-left: 21px;
padding-top: 15px;
font-size: 20px;
}
.navigation{
float: right;
}
.navigation ul>li ul{
height: 100%;
position: relative;
bottom: 100%;
}
.navigation ul>li ul>li{
bottom: 0px;
display: none;
}
.navigation>ul>li:hover ul>li{
display: block;
}
.navigation>ul>li a:hover {
text-decoration: none;
cursor:pointer;
}
HTML
<div class="masthead">
<div class="container">
<div class="logo">
<h1> MY SITE</h1>
</div>
<div class="navigation">
<ul>
<li>Courses
</li>
<li>Places
</li>
<li>More
<ul>
<li>Share
</li>
<li> Help
</li>
</ul>
</li>
<li id="navcontent">|| Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</div>
Fiddle

Answer 1

To the point,,
CSS
ul{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}
Live result here.
Hope this help
UPDATE
Ok, due to what Jon P ask I will describe this code.
Actually the main keys are :
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff; /*remove, no effect*/
padding:0 /*remove, no effect*/
}
First, we make the child(<ul>) become hidden with display: none and give it properties position:absolute, top:100%, left:0; to let it under the MORE link
And then what we want? show it when we hover the MORE link. to do so, just do simple by making that child(<ul>) visible. Of course, we use this property :
ul li:hover > ul
{
display:block
}