The dropdown menu does not appear correctly

I made this page

* {
        box-sizing: border-box;
}

/* Navbar */

nav {
        background: #4D636F;
        max-height: 51px;
        margin: 0;
        overflow: hidden;
        padding: 0;
}

nav a {
        text-decoration: none;
}

nav span.badge {
        position: absolute;
        font-size: 12px;
        top: 5px;
        right: 6;
        background-color: #4CAF50;
        padding: 1px 4px;
        border-radius: 50%;
}

nav .logo {
        background: #3A4B53;
        float: left;
        font-size: 18px;
        padding: 12px 18px;
        color: #fff;
        cursor: pointer;
}

nav .logo i {
        margin-right: 13px;
}

nav ul {
        list-style-type: none;
        margin: 0;
        padding-top: 12px;
}

nav ul li {
        display: inline;
}

nav ul li a {
        color: #fff;
        padding: 12px 18px;
        font-size: 18px;
        transition: all 0.2s ease;
}

nav ul li a:hover {
        color: #444;
        background-color: white;
}

nav .right {
        float: right;
}

nav .right a img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-bottom: 8px;
}

li.dropdown {
        position: relative;
}

.dropdown-menu {
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        padding: 0;
        top: 20px;
        z-index: 1;
        left: 0;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)
}

.dropdown-menu a {
        color: #444;
    text-align: left;
    padding: 0;
    display: block;
}

/* Navbar ends */

<link href="http://ift.tt/2aOSt2Q" rel="stylesheet"/>
<nav id="myNav">
        <div class="logo">
                <span><i class="fa fa-home" aria-hidden="true"></i>Logo</span>
        </div>
        <ul>
                <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
                <li class="dropdown">
                        <a href="#" style="position: relative;"><i class="fa fa-bell"></i>
                                <span class="badge">3</span>
                        </a>
                        <div class="dropdown-menu">
                                <a href="#">One</a>
                                <a href="#">One</a>
                                <a href="#">One</a>
                        </div>
                </li>
                <li class="right"><a href="#"><img src="images/profile.png" align="middle"></a></li>
        </ul>

</nav>

The problem as viewed is that the dropdown-menu does not appear correctly. I made it it absolute and it has z-index : 1 :(

I know that I didn't make it hoverable but I want it to appear then I will handle it.

I don't feel anything wrong with the code, but the output says otherwise.

What I did wrong? And what should I do to make it right?