Drop Down Menu Drop Down

I am not sure why, but my drop down menu won’t drop. I am using the w3schools examples. I am trying to make it sticky, responsive, and of course drop down. However when I hover over the Services tab. Nothing shows up. Not even when I click on it. I am not sure what I am doing wrong. Here is the code that I currently have.

HTML

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OuterBox Images</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <header>
        <img src="logo.png" alt="logo"/>
    </header>
    <nav>
        <ul class="topnav">
            <li><a class="active" href="#">Home</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropbtn">Services</a>
                    <div class="services">
                        <a href="#">Pictures</a>
                        <a href="#">Video</a>
                        <a href="#">Logo Design</a>
                        <a href="#">Web Design</a>
                    </div>
                </li>
            <li><a href="#">Scheduling</a></li>
            <li><a href="#">Orders</a></li>
        </ul>
    </nav>
</body>

CSS

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkviolet;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

ul.topnav li {
    float: left;
}

ul.topnav li a, .dropbtn {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
    background-color: #111111;
}

ul.topnav li a.active {
    background-color: #4caf50;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #4caf50;
}

li.dropdown {
    display: inline-block;
}

.services {
    display: none;
    position: absolute;
    background-color: grey;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.services a:hover {
    background-color: crimson;
}

.dropdown:hover .services {
    display: block;
}

@media only screen and(min-width: 320px) and (max-width: 480px) {

}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
		/* CSS ruleset */
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* CSS ruleset */
}

Here are the links that I am using from w3schools’ menus that I am trying to combine and use as one.

Drop Down

Sticky

Responsive

Change .services position to relative, and see what happens.

If you want to use absolute, you might want to give the parent a relative position, so the children can position themselves relative to that parent, rather than the browser window.