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.


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

        <img src="logo.png" alt="logo"/>
        <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>
            <li><a href="#">Scheduling</a></li>
            <li><a href="#">Orders</a></li>


* {
    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.

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.