Only Css Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lets Dropdown</title>
    <style>
        body{
            margin:0; padding:0;
        }
    .container{
        width: 90%;
        background: #ccc;
        margin: 0 auto;
        height: 100vh;
    }
    /* Dropdown Menu - Start */
    nav{
        background: black;
        color: white;
        padding:0;
    }
    nav a{
        color: white;
        text-decoration: none;
        padding: 10px 15px;
    }
    nav div{
        padding-top:10px;
        display: inline-block;
    }
    nav div span{
        cursor: pointer;
        border: none; margin: 0;
        background: none;
        color: white;
        padding: 15px 0 15px 15px;
    }
    nav div span:hover{
        color: yellow;
    }
    .dropdown:hover .dropdown-content{
        display: block;
    }
    nav a:hover{
        color: yellow;
    }
    nav div a{
        display: block;
    }
    .dropdown{
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    
    .dropdown-content{
        z-index: 1;
        display: none;
        position: absolute;
        top: 0; left: 0;
        width: 150px;
        margin-top: 44px;
        background: black;
        color: white;
    }
    i {
        border: solid white;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
    }
    .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
     }
     /* Dropdown Menu - End */
    </style>
</head>
<body>
    <header>
        <nav class="nav">
                <a href="">Home</a>
                <a href="">Map</a>
            <div class="dropdown">
            <span>Cities</span>
            <i class="arrow down"></i></p>
            <div class="dropdown-content">
                <a href="">Rodgau</a>
                <a href="">Offenbach</a>
                <a href="">Frankfurt</a>
            </div>
        </div>
        <a href="">Contact</a>
        </nav>
    </header>
</body>
</html>