So I'm working on navigation menu http://www.reversl.net/tests/ and I'm trying to include a simple drops menu when users hover over the 'you' menu item but I'm unable to get the sub- menu items to drop down. Currently it display inline, overlaying the primary menu items. Where am I going wrong?

<ul id="nav-primary">
<li class="search"> <input type="text" style="" name="search" placeholder="search" </li>
<li class="about"><a href="#">NEWS</a></li>
<li><a href="#"><img src="http://placehold.it/20x20" width="20px" height="20px" alt="" /> YOU ▼</a>

<ul>
<li><a href=â€#â€>PROFILE</a></li>
<li><a href=â€#â€>SETTINGS</a></li>
</ul>

<li><a href="#">SIGN OUT</a></li>
</ul><!--#nav-primary-->

#nav-primary {
float: right;
margin: 0;
padding: 0;
position: relative;
}

#nav-primary li {
margin: 0;
padding: 0;
display: inline-block;
height: 50px;
list-style: none;
position: relative;
}

#nav-primary li:last-child a {
border-right: 1px solid #222;
}

#nav-primary a {
border-left: 1px solid #222;
float: right;
height: 50px;
line-height: 1;
padding: 40px 20px;
text-decoration: none;
}

#nav-primary li ul {
display: none;
}

#nav-primary li:hover ul {
display: block;
position: absolute;
width: 200px;
}

#nav-primary li:hover ul li a {
background: #333;
color: #706f6f;
display: block;
border-bottom: 1px solid #222;
border-right: none;
}

#nav-primary .search {
/*padding: 10px;*/
position: relative;
}

#nav-primary .search input {
/*margin-top: 8px;*/
background: #fafafa url(icon.png) 12px 12px no-repeat;
border:1px solid #111;
width: 250px;
height: auto;
padding:12px 10px 10px 35px;
font-weight:normal;
margin-right: 3em;
}

#nav-primary .search input:focus {
outline:none;
-moz-box-shadow: inset 0 0 5px #e0e0e0;
-webkit-box-shadow: inset 0 0 5px #e0e0e0;
box-shadow: inner 0 0 5px #e0e0e0;
}

textarea:focus, input:focus{
outline: none;
}