Adding dropdown menu for navigation bar - html

Question

How do i add a dropdown menu for both of my material-icons list? I managed to done the html part. I tried many times on the css by adding dropdown codes but it doesnt work, the dropdown menu get stuck in between the nav bar. Whats happening and what can i do to resolve this?
body {} #nav-main {
width: 1280px;
min-width: 100%;
position: fixed;
top: 0;
left: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.39);
height: 60px;
}
li {
float: left;
}
li a {
display: block;
color: #ffffff;
text-align: center;
padding: 19px 25px;
/*topbottom leftright*/
text-decoration: none;
}
.nav-item5 {
width: 550px;
margin: 15px 60px;
/*topbottom leftright*/
padding: 5px;
}
input[type="search"] {
background: url(../images/search-icon.png) no-repeat #fcfcfc;
border: 1px solid #d1d1d1;
background-size: contain;
padding: 6px 15px 6px 30px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
input[type="search"]:focus {
width: 300px;
}
i.material-icons {
font-size: 27px;
}
li a:hover {
background-color: rgba(0, 0, 0, 0.50);
}
<ul id="nav-main">
<li>Home
</li>
<li>About
</li>
<li>FAQ
</li>
<li>Contact
</li>
<li>
<form action="action_page.php">
<input type="search" name="savanasearch" placeholder="Search..." class="nav-item5">
</form>
</li>
<li style="float:right">
<i class="material-icons">account_circle</i>
<div class="dropdown">
Welcome
<ul>
<li>Login
</li>
<li>Register
</li>
</ul>
</div>
</li>
<li style="float:right">
<i class="material-icons">favorite_border</i>
<div class="dropdown">
<ul>
<li>Favorites
</li>
<li>Wishlist
</li>
<li>Track Order
</li>
</ul>
</div>
</li>
</ul>

Answer 1

See this example
I've changed a little bit you navbar cause you got a class for each one, an it's not right if you don't need them. Also the size of the search-bar. Check the example. I leave you some examples to let you know the "why?"
.dropdown ul{
z-index: 9;
top: 101%;
position: absolute;
display: none;
}