Sub-menu não aparece

body {
background-color: #fff;
}
.principal ul ul {
display: none;
}
.principal ul li:hover > ul {
display: block;
}
.principal ul {
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-block;
background:linear-gradient(top, #efefef 0%, #bbbbbb 100% );
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
.principal ul li{
float: left;
}
.principal ul li a {
padding: 5px 10px 5px 10px;
display: block;
color: #757575;
text-decoration: none;
}
.principal ul li:hover {
background: #4b545f;
}
.principal ul li:hover a {
color: #fff;
}
.principal ul li:hover>ul {margin: 0px; padding: 0px;}
.principal ul li:hover>ul li {float: none; display: block;}
.principal ul li:hover>ul li a {color: #666; min-height: 150px;}
.principal ul li:hover>ul li a:hover {color: #fff;}
.principal ul li {position: relative;}
.principal ul li ul {position: absolute; top: 30px; left: 0px;}

<div class="principal">
<ul>
<li><a href="">Home</a></li>
<ul>
         <li><a href="">Missão</a></li>
         <li><a href="">Equipa</a></li>
</ul>
<li><a href="">Portfolio</a></li>
<ul>
         <li><a href="">Projectos A</a></li>
         <li><a href="">Projectos B</a></li>
</ul>
</ul>
</div>